如何使用jQuery或纯JS重置所有复选框？

84

如何使用jQuery或纯JS重置文档中的所有复选框？

javascript jquery checkbox

— 街头游行
source

145

如果您是要从所有复选框中删除“已选中”状态，请执行以下操作：

$('input:checkbox').removeAttr('checked');

— 塔图·乌尔曼嫩（Tatu Ulmanen）
source

该脚本切换复选框的状态。不确定我是否做错了

— Sundeep

38

请注意，在jQuery v1.6及更高版本中，您应该使用.prop（'checked'，false）来获得更好的跨浏览器兼容性-请参阅api.jquery.com/prop

— Henry C

在打开新对话框之前，我用它重置了表单。在此之后，我需要选中一个复选框，这是行不通的。当我查看生成的代码时，它被“选中”，但在我的页面上不是$（'input：checkbox'）。removeAttr（'checked'）; $（'input [value ='+ val +']'）。attr（'checked'，true）;

— Gayane

1

现在这是一个过时的答案-请参阅：stackoverflow.com/questions/17420534/…–

— raison

47

如果要使用表单的重置功能，则最好使用此功能：

$('input[type=checkbox]').prop('checked',true);

要么

$('input[type=checkbox]').prop('checked',false);

似乎removeAttr()无法通过重置form.reset()。

— 俞凯文
source

1

尽管公认的答案也可行，但我发现这是最好的方法。请，如果您正在阅读本文，请考虑使用此方法，因为这是最佳做法。

— rafaelmorais

13

上面的答案对我不起作用-

以下工作

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

这样可以确保所有复选框均未选中。

— 日深
source

11

在某些情况下，默认情况下可以选中此复选框。如果要还原默认选择而不是设置为未选择，请比较defaultChecked属性。

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});

— 迪恩·布尔奇
source

11

我以前用过：

$('input[type=checkbox]').prop('checked', false);

似乎.attr和.removeAttr在某些情况下不起作用。

编辑：请注意，在jQuery v1.6及更高版本中，您应该使用它.prop('checked', false)来获得更大的跨浏览器兼容性-请参阅https://api.jquery.com/prop

在这里评论：如何使用jQuery或纯JS重置所有复选框？

— 杰夫
source

7

Java脚本

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery的

$('input:checkbox').each(function() { this.checked = false; });

要执行相反的操作，请参见：按ID /类别选择所有复选框

— Kenorb
source

4

 $(":checkbox:checked").each(function () {

 this.click(); 
});

取消选中复选框，将逻辑转过来做相反的事情

— 耶内·穆拉图（Yene Mulatu）
source

3

您可以选择页面的哪个div或部分可以选中复选框，哪些不选中。我遇到了这样一种情况，在我的页面中有两个表单，一个表单具有预填充的值（用于更新），而另一个表单需要重新填充。

$('#newFormId input[type=checkbox]').attr('checked',false);

这只会使ID为newFormId的表单中的复选框处于未选中状态。

— 卡文德
source

2

如Tatu Ulmanen的回答中所述，使用以下脚本将完成此任务

$('input:checkbox').removeAttr('checked');

但是，正如Blakomen的评论所说，在1.6版之后，最好jQuery.prop()改用

请注意，在jQuery v1.6及更高版本中，应使用.prop（'checked'，false）代替，以获得更大的跨浏览器兼容性

$('input:checkbox').prop('checked', false);

使用时请小心jQuery.each()，可能会导致性能问题。（也请避免jQuery.find()在这种情况下使用。

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

— 米歇尔·艾尔斯
source

1

我用过这样的东西

$(yourSelector).find('input:checkbox').removeAttr('checked');

— 安德烈·加斯帕（Andrej Gaspar）
source

1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container check">
<button class="btn">click</button>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
}); 
})
</script>
</body>
</html>

— 安库什
source

3

不鼓励仅使用代码的答案。您真的想包括一些解释。

— GhostCat