Question

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

Answer 1

如果您的意思是如何从所有复选框中删除“已检查”状态：

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

Answer 2

如果您想使用表单的重置功能，最好使用它：

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

OR

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

看起来removeAttr()无法重置form.reset()。

Answer 3

上述答案对我不起作用 -

以下工作

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

这样可以确保取消选中所有复选框。

Answer 4

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

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

Answer 5

我以前用过这个：

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

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

编辑：请注意，在jQuery v1.6及更高版本中，您应该使用.prop（＆＃39; checked＆＃39;，false）代替更高的跨浏览器兼容性 - 请参阅api.jquery.com/prop < / p>

在此评论：How to reset all checkboxes using jQuery or pure JS?

Answer 6

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

 this.click(); 
});

取消选中复选框，将你的逻辑转向对面

Answer 7

您可以选择检查哪些div或部分网页可以选中复选框，哪些不是。我遇到的情况是，我的页面中有两个表单，一个具有预填充值（用于更新），其他需要填充新的。

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

这将只显示id为newFormId的表单中的复选框为未选中状态。

Answer 8

的Javascript

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

相反，请参阅：Select All Checkboxes By ID/Class

Answer 9

如Tatu Ulmanen's answer所述，使用以下脚本将完成工作

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

但是，正如Blakomen's comment所述，在版本1.6之后，最好使用jQuery.prop()而不是

请注意，在jQuery v1.6及更高版本中，您应该使用 .prop（＆＃39; checked＆＃39;，false）代替更大的跨浏览器兼容性

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

使用jQuery.each()时要小心，否则可能会导致性能问题。（同样，在这种情况下避免使用jQuery.find()。请改为使用每个）

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

Answer 10

我使用了类似的东西

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

Answer 11

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

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

11 个答案:

的Javascript

的jQuery