Question

Given a list of LIs each LI includes a checkbox like so:

<li class="contact">
    <input type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <div class="content">
        <cite>Baby James</cite>
    </div>
</li>

I would like to be able to toggle the checkbox on LI click, not just on checkbox click. I got this work which you can see here:

http://jsfiddle.net/xgB5X/2/

The problem is, while clicking on the LI toggles the checkbox, click on the checkbox directly is no broken. Clicking on the checkbox no longer toggles. Any suggestions to get this working? Thanks

Answer 1

A couple of notes:

use .prop() instead of .attr() (it’s also easier to tell true/false on it, must each other through all browsers.

You can check the e.srcElement for your classname of checkbox within the click().

$('.listview li').on('click', function(e) {

  if (e.srcElement.className === 'checkbox') {
      e.stopPropagation();   
      return;
  }

  checkbox = $(this).find(':checkbox');

   // Toggle Checkbox
   if (checkbox.prop('checked')) {
       checkbox.prop('checked', false);
   } else {
       checkbox.prop('checked', true);
   }

});

jsFiddle