Nrthugu

The mind boggles - my colleague sent me this script - I am sure I overlook something simple

http://jsfiddle.net/mplungjan/j4m62/

which for some reason I cannot figure out, checks all three checkboxes regardless of which I click - I would expect only the first two to be checked on click of either of the first two and the third to be checked on its own

HTML:

<input class="check-all" name="checkbox"  id="checkbox1" type="checkbox" value="on"/><label for="checkbox1">Check 1&2</label><br/>



<input class="check-allfeatured" name="checkbox"  id="checkbox2"  type="checkbox" value="on"/><label for="checkbox2">Check 1&2</label><br/>



<input class="check-alldel" name="deleteids"  id="deleteids1"  type="checkbox" value="on"/><label for="deleteids1">Check this only</label>

JavaScript:

$(document).ready(function(){

  $('.check-all:checkbox').click(function(event) {

      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';

      console.log(group+':'+event.target.checked);

      $(group).each(function(){

          $(this).attr("checked",event.target.checked);

      });

  });



  $('.check-alldel:checkbox').click(function(event) {

      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';

      console.log(group+':'+event.target.checked);

      $(group).each(function(){

          $(this).attr("checked",event.target.checked);

      });

   });



  $('.check-allfeatured:checkbox').click(function(event) {

      var group = 'input:checkbox[name=' + $(this).attr('name') + ']';

      console.log(group+':'+event.target.checked);

      $(group).each(function(){

          $(this).attr("checked",event.target.checked);

      });

  });

});

While not pretty, the corrected version is here: http://jsfiddle.net/j4m62/8/

Your problem was that you were not putting quotes around the names of your checkbox name assertion.

Change:

var group = 'input:checkbox[name=' + $(this).attr('name') + ']';

into:

var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';

and you will get the behavior you are expecting. But you really have a lot of duplicated code so you should probably refactor since you are performing the same operation regardless of the checkbox clicked. Check this out.

Thanks @limelights for pointing out that I forgot to explicitly pass event in. Updated link.

The code below will check all checkboxes because the group variable contains input:checkbox[name=checkbox] and that will select all checkboxes in your case.

$(group).each(function() {

  $(this).attr("checked", event.target.checked);

});