Question

我有一个带有几个复选框的大表单，其名称为chkbx0..chkbxN（N代表生成表单的PHP代码）。我想创建一个类似链接的实体，它会在点击它时为所有复选框反转检查状态（因此，检查的内容变为未选中状态，反之亦然）。所以基本上我对一个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代码片段来实现“chkbxsnegate”功能。非常感谢。

Answer 1

以下版本适用于大多数浏览器，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;
}

Answer 2

有一个较短的解决方案：

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

更短：

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

Answer 3

您可以使用Jquery

来完成

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

Answer 4

如果我完全理解您需要撤消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/

Answer 5

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

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

有关详细信息，请参阅this link。

在多个复选框上取消复选框选择状态

5 个答案: