Jquery select checkbox from div

Question

I am wondering if there is a way in jQuery to check / uncheck the box when someone clicks on the entire div layer. As is the case with the massive selection area.

Any ideas?

Here's an example ... I'm trying to set up a checkbox so that I can switch to individual checkboxes, to a large extent.

<fieldset> <div> <input type="checkbox" id="Checkbox1" /> </div> Person 1<br /> </fieldset> <fieldset> <div > <input type="checkbox" id="Checkbox2" /> </div> Person 2<br /> </fieldset> 

Answer 1

Perhaps by clicking on the div as a parent.

 $(function() { $('#divId').toggle( function(event) { $(this).find('input').attr('checked', true); }, function(event) { $(this).find('input').attr('checked', false); } ); }); 

This should only check the blocks that have been pressed.

Answer 2

 $('fieldset div').bind('click', function() { var checkbox = $(this).find(':checkbox'); checkbox.attr('checked', !checkbox.attr('checked')); }); 

Answer 3

If you want to do this work both in order to click on an element and inside the input, as well as call the change function, you can use the following code:

 $('input').change(function() { console.log('change triggered') }).click(function(event) { event.stopPropagation() }) $('div').click(function() { var c = $this.find('input') c.attr('checked', (!c.is(':checked')).change() }) 

Answer 4

Check the "Check all" box:

 <input type="checkbox" id="checkAll" /> Check All 

And your JS code:

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

Answer 5

 $(function() { $('#divId').toggle( function(event) { $('input[name=foo]').attr('checked', true); }, function(event) { $('input[name=foo]').attr('checked', false); } ); });