javascript - Negate checkbox selection status on multiple checkboxes - Stack Overflow

admin管理员组

文章数量:1313731

I have a big form with several checkboxes, having names chkbx0..chkbxN for them (N is known by PHP code which generates the form). I want to create a link-like entity which will invert the checked status (so, what was checked bees unchecked and vice versa) for all the checkboxes when it's clicked. So basically I am interested in a javascript function which has a parameter (the "N") and does the work, and I would call it something like this:

    <p>You can reverse checkboxes <a href="javascript:chkbxsnegate(<?php echo $n; ?>);">by clicking here</a>.</p>

The checkboxes are something like these:

    <input type="checkbox" name="chkbx0">
    <input type="checkbox" name="chkbx1">
    ...

I use the parameter "N", because there can be more checkboxes, but I only need to invert checked status only till "N".

Please suggest me a javascript code fragment to implement function "chkbxsnegate". Thanks a lot in advance.

I have a big form with several checkboxes, having names chkbx0..chkbxN for them (N is known by PHP code which generates the form). I want to create a link-like entity which will invert the checked status (so, what was checked bees unchecked and vice versa) for all the checkboxes when it's clicked. So basically I am interested in a javascript function which has a parameter (the "N") and does the work, and I would call it something like this:

    <p>You can reverse checkboxes <a href="javascript:chkbxsnegate(<?php echo $n; ?>);">by clicking here</a>.</p>

The checkboxes are something like these:

    <input type="checkbox" name="chkbx0">
    <input type="checkbox" name="chkbx1">
    ...

I use the parameter "N", because there can be more checkboxes, but I only need to invert checked status only till "N".

Please suggest me a javascript code fragment to implement function "chkbxsnegate". Thanks a lot in advance.

• javascript
• html
• checkbox

Share Improve this question Follow asked Mar 14, 2012 at 15:48 LGBLGB 71811 gold badge1010 silver badges2020 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

The following will work in most browsers, except IE7 and below (but it works in IE8 and 9)

function chkbxsnegate(n) {
    var qsa = document.querySelectorAll("input[type=checkbox][name=chkbx"+n+"]"),
        l = qsa.length, i;
    for( i=0; i<l; i++) qsa[i].checked = !qsa[i].checked;
}

There is a shorter solution:

$('input[type="checkbox"]').each(function () {
  $(this).prop('checked', !$(this).is(':checked'));
});

Even shorter:

$("[type=checkbox]").each(function() {
    this.checked = !this.checked;
});

You can do it using Jquery

$('input[name^=chkbx]').each(function() {
  if ($(this).is(':checked'))
  {
     $(this).prop('checked', false);
  }
  else
  {
    $(this).prop('checked', true);
  }
});

If I well understood you need to reverse the checked attribute until n^th element (from 0 to n^th included)

var chkbxsnegate = function(n) {
   var cbox = document.querySelectorAll('input[type="checkbox"][name^="chkbx"]');
   while (n--) {
      cbox[n].checked = !cbox[n].checked;
   }
}

Example fiddle: http://jsfiddle/wHPnA/

You should use jQuery to inverse the checkboxes.

$('a#cb-inverse').click(function() {
 $('input.my_cb').each(function() {
   $(this).is(':checked') ? $(this).removeAttr('checked') : $(this).attr('checked','checked');
 });
});

See this link for more information.

本文标签： javascriptNegate checkbox selection status on multiple checkboxesStack Overflow