如何制作一个取消选中所有复选框的按钮？答案

【问题标题】：How to make a button that will uncheck all checkboxes?如何制作一个取消选中所有复选框的按钮？
【发布时间】：2014-04-29 17:46:02
【问题描述】：

我有这段代码可以选中/取消选中所有复选框并选中/取消选中单个复选框。

  <!DOCTYPE HTML>
 <html>
   <head>
   <meta charset="utf-8">
 <title>Persist checkboxes</title>
</head>
<body>
<div>
  <label for="checkAll">Check all</label>
  <input type="checkbox" id="checkAll">
</div>
<div>
  <label for="option1">Option 1</label>
  <input type="checkbox" id="option1">
</div>
<div>
  <label for="option2">Option 2</label>
  <input type="checkbox" id="option2">
</div>
<div>
  <label for="option3">Option 3</label>
  <input type="checkbox" id="option3">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>

<script>
  $("#checkAll").on("change", function() {
    $(':checkbox').not(this).prop('checked', this.checked);
  });

  $(":checkbox").on("change", function(){
    var checkboxValues = {};
    $(":checkbox").each(function(){
      checkboxValues[this.id] = this.checked;
    });
    $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
  });

  function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
      Object.keys(checkboxValues).forEach(function(element) {
        var checked = checkboxValues[element];
        $("#" + element).prop('checked', checked);
      });
    }
  }

  $.cookie.json = true;
  repopulateCheckboxes();
</script>

我的问题是我想制作一个按钮，该按钮将具有清除或取消选中所有复选框的功能。有人可以帮我这样做吗？谢谢！

【问题讨论】：

$(':checkbox') 无效。使用 $('input[type="checkbox"]')
@AdrianPreuß :checkbox 是一个 jQuery 提供的复选框过滤器。

标签： javascript jquery html checkbox

【解决方案1】：

点击按钮时调用以下函数即可：

function uncheckAll(){
   $('input[type="checkbox"]:checked').prop('checked',false);
}

function uncheckAll() {
  $("input[type='checkbox']:checked").prop("checked", false)
}
$(':button').on('click', uncheckAll)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='button' value="clear" />

纯JS版：

function uncheckAll() {
  document.querySelectorAll('input[type="checkbox"]')
    .forEach(el => el.checked = false);
}

document.querySelector('button').addEventListener('click', uncheckAll)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' checked/>
<button>Clear</button>

【讨论】：

【解决方案2】：

<button type="reset">Uncheck all</button>

【讨论】：

这可以清除复选标记，但不会触发复选框上的更改事件。我在按钮上添加了一个“onclick”功能来进行我需要的更改。

【解决方案3】：

简单快速

http://jsfiddle.net/techsin/Zq6Et/

$('#btn').click(function(){
    $("input[type='checkbox']").attr("checked",false);
});

【讨论】：

这将遍历所有复选框，无论是否选中。我现有的答案应该更快..
:checked 也是如此，jquery 不仅循环遍历所有复选框并检查是否已选中，而且创建另一个数组并将选中的数组保存在该数组中。更贵。仅仅因为它是由 jquery 完成的，并不意味着它神奇地没有问题。
无论哪种方式，这大约需要 10 毫秒..除非有 30,000..每秒检查和关闭的复选框！这种优化没有任何价值。
好点。无论如何，jquery 将遍历所有复选框。但在这种情况下，它必须将所有已检查的属性设置为 false - 这是一种开销。第二点 - 在这种情况下，同意。
这是真的..我想这取决于个人开发者的口味。

【解决方案4】：

试试这个有两种情况::

1) Check all Checkboxes
1) UnCheck all Checkboxes

JS Fiddle

【讨论】：

我看到您在演示中包含了一个文本框。你如何清除文本框？
$('textboxId').val(''); 我就是这样
@user3230425 如果您想清除每个文本框和复选框，您应该使用重置按钮或 $("Form").reset() 重置表单

【解决方案5】：

你可以去http://jsfiddle.net/fh2nV/1/链接

或下面的示例代码

HTML：

<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>

</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>

</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>

</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>

</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>

</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    </tr>
</table>

jquery

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});

【讨论】：

【解决方案6】：

你可以简单地使用重置按钮来达到这个目的：

<input type="reset" />

Fiddle

如果还有其他字段：

$('#unchk').click(function(){
    $('input[type="checkbox"]').each(function(){
    $(this).attr("checked",false);
    });
});

Fiddle 2

【讨论】：

@Mr.Alien 他当前的 html 只包含复选框
用户经常省略其他字段以使问题更短，所以我们不能说:)
好的，如果碰巧用户还有其他字段，我会添加一个额外的解决方案
@Mr.Alien 是正确的，我只包含了复选框，而且我正在寻找一个将在按钮中的功能，因为该按钮将是一个提交类型。
@user3230425 我会尽快添加解决方案

【解决方案7】：

使用一点 jQuery 来实现您想要做的事情。

$("input[type='checkbox']").is(":checked").attr("checked",false)

应该可以。虽然它没有经过测试，并且可能在语法上不正确。只需为任何元素添加一个点击监听器。

【讨论】：

抛出错误Uncaught TypeError: Object #<error> has no method 'attr'