seleziona / deseleziona le caselle di controllo di bootstrap con jQuery

Ho fatto un altro post ieri e non ha avuto successo con esso. Proverò ora a riordinare l’idea e a chiedere ancora perché non riesco a trovare la soluzione per questo (sono un principiante e ci sto provando davvero).

Il fatto è che sto lavorando con questo modello basato su Bootstrap, e questo è il codice che posso vedere direttamente da uno dei file e che sto usando sul mio progetto:

snippet html:

Dopo molte ricerche che ho fondato durante l’ispezione, il mio codice appare come questo (snippet):

 

Come puoi vedere, vengono aggiunti un altro div e un altro intervallo (seriamente non so perché o come) quindi immagino ora che si tratti di un problema DOM quello che sto avendo.

Questo è snippet del mio file js:

 $('#allstates').click(function() { $('.checkbox').find('span').addClass('checked'); }); 

Quindi questa funzione seleziona TUTTE le caselle di controllo che ho (anche se quelle che non voglio perché appartengono a un’altra categoria).

Voglio sapere perché sono stati aggiunti div e span e come selezionare solo le caselle di controllo che desidero.

Per quello sto provando codice come questo ma nessun successo:

test 1

 $('#allstates').click(function() { if ($(this).is(':checked')) { $('span input').attr('checked', true); } else { $('span input').attr('checked', false); } }); 

test2

 $('#allstates').click(function() { $(".states").prop("checked",$("#allstates").prop("checked")) }); 

e così altri che ho cancellato.

NOTA: non vengono visualizzati errori js durante l’ispezione

Inoltre è importante aggiungere il puntello a true alla selezione delle caselle di controllo:

 $("#checkAll").click(function(){ var check = $(this).prop('checked'); if(check == true) { $('.checker').find('span').addClass('checked'); $('.checkbox').prop('checked', true); } else { $('.checker').find('span').removeClass('checked'); $('.checkbox').prop('checked', false); } }); 

Siccome ho detto che questa funzione ha controllato tutte le checkbox che avevo (anche se non dovevano essere controllate), ho cercato di cercare la soluzione:

 $('#allstates').click(function() { $('.checkbox').find('span').addClass('checked'); }); 

Ma questo non è quello che volevo. Ho anche detto che ho notato che il codice era “diverso” quando lo ispezionavo (in Chrome con F12). Quindi, come ha detto @thecbuilder, cambia per aggiungere uno stile.

Mi sono reso conto che dal momento che il codice sta cambiando … ho dovuto cambiare la class (casella di controllo) da cui stavo iniziando la ricerca “span tag”, quindi cambio la casella di controllo di class in stati id e questo è il risultato:

 $('#allstates').click(function() { if($(this).attr("checked")){ $('#states').find('span').addClass('checked'); }else{ $('#states').find('span').removeClass('checked'); } }); 

Ora finalmente funziona.

Penso che tu stia cercando codice come:

 $(document).ready(function() { $("#allstates").on("change", function() { var checked = $(this).prop("checked"); $(this).parents(".controls") .first() .find("input[type=checkbox]") .prop("checked", checked); }); }); 

Esempio JsFiddle

Quando cambia lo stato della casella di controllo con l’id, ottieni il valore della casella di controllo, trova il primo elemento html principale con una class denominata controls e quindi aggiorna solo tutte le caselle di controllo in quell’elemento con il valore di checked.

Semplice checkbox di avvio

  

Quando esegui il debug nello strumento di sviluppo di Chrome, l’etichetta appare come https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

Per lo stato della casella di controllo di Google, imposta true|false su lable.control.checked

 label.control.checked = false; //uncheck label.control.checked = true; //check 

Demo video https://youtu.be/3qEMFd9bcd8