JQuery bind click event to checkboxes

Question

Here's a basic view of what my html looks like:

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

What I need to do is bind the .click() event to the checkboxes in part 1, 2, and 3 seperately. I've tried this $('#part1:checkbox').click(...) but that didn't work. If I use $("form :checkbox").click(...) same click event is bound to all checkboxes and not just one set. How would I seperate these?

Answer 1

You're almost there. You just need a space to separate the descendant selector:

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

To increase performance, you might wanna use this:

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

Answer 2

Or you give same class name for all checkboxes and give the corresponding div ID for the checkbox also, so you can use the following code,

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

and your script goes like this.

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