Question

我有这个代码可以选中/取消选中所有复选框，然后选中/取消选中一个复选框。

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

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

Answer 1

点击按钮调用以下功能可以：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

简单快捷

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

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

Answer 4

试试这个有两个场景::

1) Check all Checkboxes
1) UnCheck all Checkboxes

JS Fiddle

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

    });
});

Answer 6

您只需使用重置按钮即可：

<input type="reset" />

Fiddle

如果还有其他字段：

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

Fiddle 2

Answer 7

使用一点jQuery来实现您的目标。

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

那应该有用。它虽然没有经过测试，但在语法上可能不正确。只需在任何元素的点击监听器中输入。

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

7 个答案:

Fiddle

Fiddle 2