CODEWITHSUNDEEP
javascriptjquery
Bernard
Bernard

Reputation: 1229

How to toggle checkbox selection rather than only selecting?

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.

Upvotes: 0

Views: 179

Answers (2)

maerics
maerics

Reputation: 156384

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/

Upvotes: 1

Rick
Rick

Reputation: 1573

   $cbs.slice(start,end).each(function() {
       if ($(this).is(":checked")) {
           $(this).removeProp("checked");   
       } else {
           $(this).prop("checked",true);
       }
   });

http://jsfiddle.net/ShZNF/1/

Edit: Maeric's solution is better. I wasn't aware removeProp had this gotcha:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Upvotes: 0

Related Questions