堆栈内存溢出
  繁体   English   中英

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

[英]How to make a button that will uncheck all checkboxes?

 原文  2014-03-22 06:37:57  8   7    javascript/ jquery/ html/ checkbox

问题描述

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

  <!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>

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

7 个解决方案

解决方案1
 10 已采纳  2014-03-22 06:48:59

单击按钮时调用以下函数将执行以下操作：

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
 3  2014-03-22 06:41:33

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

解决方案3
 3  2014-03-22 07:03:28

简单快速

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

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

解决方案4
 2  2014-03-22 06:53:25

试试这个有两种情况的：

1) Check all Checkboxes
1) UnCheck all Checkboxes

JS小提琴

解决方案5
 1  2014-03-22 06:43:23

为此，您可以简单地使用重置按钮：

<input type="reset" />

小提琴

如果还有其他字段：

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

小提琴 2

解决方案6
 1  2014-03-22 06:48:42

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

或下面的示例代码

网址：

<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>

查询

$(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");
        }

    });
});

解决方案7
 0  2014-03-22 06:48:45

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何制作一个取消选中所有复选框并更改 div 的背景颜色的按钮？ 如何在单击按钮时取消选中复选框？ 如何选中和取消选中所有复选框 取消选中与单击按钮相关的所有复选框。 使用 jquery 取消选中按钮单击上的所有复选框 复选框像单选按钮一样工作，但如何取消选中？ 如何制作“选中”复选框，无法取消选中 如何使用按钮取消选中所有复选框。 在子级中输入标签，在父级中输入按钮。 反应-表 如何取消选中所有复选框？ 如何检查和取消选中div中的所有复选框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM