jQuery evento se unen clic para casillas de verificación

Question

Aquí es una visión básica de lo que mi html se ve así:

<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> 

Lo que hay que hacer es obligar a la evento .click() a las casillas de verificación en la parte 1, 2 y 3 por separado. Intenté esto $('#part1:checkbox').click(...) pero eso no funcionó. Si uso $("form :checkbox").click(...), el mismo evento de clic está vinculado a todas las casillas de verificación y no a un solo conjunto. ¿Cómo los separaría?

Answer 1

Estás casi allí. Sólo se necesita un espacio para separar el selector descendiente:

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

para aumentar el rendimiento, puede que quiera usar esto:

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

Answer 2

Utilice esta:

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

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

Answer 3

O le das el mismo nombre de clase para todas las casillas de verificación y le das la identificación de div correspondiente para la casilla también, para que pueda usar el siguiente código,

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

y su secuencia de comandos es la siguiente.

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

Answer 4

tuve un problema similar, y esta página StackOverflow es la primera respuesta que me topé, pero no era realmente satisfecho con ella. Encontré este artículo https://www.kevinleary.net/jquery-checkbox-checked/ con una mejor solución.

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