否定多个复选框上的复选框选择状态

Negate checkbox selection status on multiple checkboxes

本文关键字：复选框 选择 状态      更新时间：2023-09-26

我有一个带有几个复选框的大表单，它们的名称为chkbx0..chkbxN（生成表单的PHP代码知道N）。我想创建一个类似链接的实体，当它被点击时，它将反转所有复选框的选中状态（因此，选中的内容将变为未选中，反之亦然）。因此，基本上我对一个javascript函数感兴趣，它有一个参数（"N"）并完成工作，我会把它称为这样的函数：

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

复选框是这样的：

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

我使用参数"N"，因为可以有更多的复选框，但我只需要将检查状态反转到"N"。

请建议我使用一个javascript代码片段来实现函数"chkbxsnegative"。提前非常感谢。

有一个较短的解决方案：

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

更短：

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

以下内容适用于大多数浏览器，IE7及以下版本除外（但适用于IE8和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;
}

您可以使用Jquery

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

如果我很清楚您需要反转checked属性，直到n^th元素（包括从0到n^th）

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

小提琴示例：http://jsfiddle.net/wHPnA/

您应该使用jQuery来反转复选框。

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

有关详细信息，请参阅此链接。

相关文章：