Question

I currently am using this JavaScript code snippet to select 3 checkboxes at a time

$(document).ready(function() {
   var $cbs = $('input:checkbox[name="select[]"]'),
       $links = $('a[name="check"]');

   $links.click(function() {
      var start = $links.index(this) * 3,
          end = start + 3;
      $cbs.slice(start,end).prop("checked",true);
   });
});

Currently this code only selects the checkboxes, however I was wondering if anyone knew how to modify it so that it toggles the checkbox selection on and off?

Here’s an example of my current code: “jsfiddle” – click the 1-3, 4-6 links etc to check the checkboxes.

Answer 1

Make the second argument to the prop("checked", ...) call depend on the “checked” status of the first (or other) checkbox in the slice:

// ...
$cbs.slice(start,end).prop("checked", !$cbs.slice(start).prop("checked"));

Here’s an updated jsFiddle.

[Edit] Or to update each checkbox in the slice individually:

// ...
$cbs.slice(start,end).each(function() {
  var $this = $(this);
  $this.prop("checked", !$this.prop("checked"));
});

http://jsfiddle.net/ShZNF/3/