JQuery legano evento click per checkboxes

Question

Ecco una vista di base di ciò che il mio html appare come:

<form> 
    <div id="part1"> 
    // some html form elements including checkboxes 
    </div> 
    <div id="part2"> 
    // more html code with more checkboxes 
    </div> 
    <div id=part2"> 
    // data table with numerous checkboxes built dynamically 
    </div 
</form> 

Che cosa devo fare è legare l'evento .click() per le caselle di controllo nella parte 1, 2, e 3 separatamente. Ho provato questo $('#part1:checkbox').click(...) ma quello non ha funzionato. Se utilizzo lo $("form :checkbox").click(...) stesso evento click è associato a tutte le checkbox e non a un solo set. Come potrei separarli?

Answer 1

Sei quasi arrivato. Hai solo bisogno di uno spazio per separare il selettore discendente:

$('#part1 :checkbox').click(function(){ 
    // code goes here 
}); 

per aumentare le prestazioni, si potrebbe desiderare di utilizzare questo:

$('#part1 input[type=checkbox]').click(function(){ 
    // code goes here 
}); 

Answer 2

Utilizzare questa:

$('#part1 input:checkbox').click(...) 

http://api.jquery.com/checkbox-selector/

Answer 3

O dai lo stesso nome di classe per tutte le checkbox e dai il corrispondente ID div per la casella di controllo, quindi è possibile utilizzare il seguente codice,

<input type="checkbox" class="checkall" id="part1">Part 1 

e il tuo script va così.

$('.checkall').click(function() { 
if (this.checked == false) { 
$("." + $(this).attr("id")).hide(); 
} 
}); 

Answer 4

ho avuto un problema simile, e questa pagina StackOverflow è la prima risposta mi sono imbattuto su, ma non era davvero soddisfatto. Ho trovato questo articolo https://www.kevinleary.net/jquery-checkbox-checked/ con una soluzione migliore.

$('input[name="subscribe"]').on('click', function(){ 
    if ($(this).is(':checked')) { 
     $('input[name="email"]').show(); 
    } 
    else { 
     $('input[name="email"]').hide(); 
    } 
});