Làm cách nào để đặt lại tất cả các hộp kiểm trong tài liệu bằng jQuery hoặc JS thuần túy?
Câu trả lời:
Nếu ý của bạn là cách xóa trạng thái 'đã chọn' khỏi tất cả các hộp kiểm:
$('input:checkbox').removeAttr('checked');
Nếu bạn muốn sử dụng tính năng đặt lại của biểu mẫu, bạn nên sử dụng tính năng này:
$('input[type=checkbox]').prop('checked',true);
HOẶC LÀ
$('input[type=checkbox]').prop('checked',false);
Có vẻ như removeAttr()không thể được đặt lại trước form.reset().
Trong một số trường hợp, hộp kiểm có thể được chọn theo mặc định. Nếu bạn muốn khôi phục lựa chọn mặc định thay vì đặt là không được chọn, hãy so sánh thuộc defaultCheckedtính.
$(':checkbox').each(function(i,item){
this.checked = item.defaultChecked;
});
Tôi đã sử dụng cái này trước đây:
$('input[type=checkbox]').prop('checked', false);
có vẻ như .attr và .removeAttr không hoạt động trong một số trường hợp.
chỉnh sửa: Lưu ý rằng trong jQuery v1.6 trở lên, bạn nên sử dụng .prop('checked', false)thay thế để có khả năng tương thích nhiều trình duyệt hơn - xem https://api.jquery.com/prop
Nhận xét ở đây: Làm thế nào để đặt lại tất cả các hộp kiểm bằng jQuery hoặc JS thuần túy?
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
$('input:checkbox').each(function() { this.checked = false; });
Để làm ngược lại, hãy xem: Chọn Tất cả Hộp kiểm Theo ID / Lớp
$(":checkbox:checked").each(function () {
this.click();
});
để bỏ chọn hộp kiểm, hãy xoay logic của bạn để làm ngược lại
Bạn có thể lựa chọn div hoặc một phần trang của bạn có thể chọn hộp kiểm và hộp kiểm nào không. Tôi đã gặp tình huống trong đó tôi có hai biểu mẫu trong trang của mình và một biểu mẫu có các giá trị được điền sẵn (để cập nhật) và biểu mẫu khác cần được điền mới.
$('#newFormId input[type=checkbox]').attr('checked',false);
điều này sẽ chỉ làm cho các hộp kiểm ở dạng có id newFormId là không được chọn.
Như đã nói trong câu trả lời của Tatu Ulmanen bằng cách sử dụng kịch bản làm theo sẽ thực hiện công việc
$('input:checkbox').removeAttr('checked');
Nhưng, như bình luận Blakomen của nói, sau khi phiên bản 1.6 nó tốt hơn để sử dụng jQuery.prop()thay vì
Lưu ý rằng trong jQuery v1.6 trở lên, bạn nên sử dụng .prop ('đã kiểm tra', sai) để thay thế cho khả năng tương thích trên nhiều trình duyệt
$('input:checkbox').prop('checked', false);
Hãy cẩn thận khi sử dụng jQuery.each()nó có thể gây ra các vấn đề về hiệu suất. (ngoài ra, hãy tránh jQuery.find()trong những trường hợp đó. Hãy sử dụng từng cái thay thế)
$('input[type=checkbox]').each(function()
{
$(this).prop('checked', false);
});
Tôi đã sử dụng một cái gì đó như thế
$(yourSelector).find('input:checkbox').removeAttr('checked');
<!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>