Kiểm tra tất cả các hộp kiểm khi tải trang bằng jQuery

Question

Khi tải trang, sử dụng jQuery làm cách nào tôi có thể tự động chọn tất cả các hộp kiểm trong một div cụ thể?

Answer 1

$(function(){ 
    $('#thediv input:checkbox').attr('checked', 'checked'); 
}); 

Answer 2

gì redquare có sẽ làm việc, nhưng đó là một ý tưởng tốt hơn tổng thể sử dụng true/false với những vì đó là cách họ bình thường, dưới đây là một vài ví dụ về lý do tại sao đây là một thói quen có ích để làm theo. Ví dụ:

$('#myDiv :checkbox').attr('checked', 'checked'); 
alert($('#myDiv :checkbox').attr('checked')); //this alerts true, not "checked" 

You can test this here

Thay vào đó, nhận được trong thói quen đi qua một boolean, đó là rất nhiều linh hoạt hơn, ví dụ:

$(function() { 
    $('#myDiv :checkbox').attr('checked', true); 
}); 

này cho phép linh hoạt hơn rất nhiều trong Ví dụ: mã terse hơn, giả sử chúng tôi có hộp kiểm "Chọn tất cả" ở trên cùng, trông như thế nào?

$('#checkAll').change(function() { 
    if(this.checked) { 
    $('#subTable :checkbox').attr('checked', 'checked'); 
    } else { 
    $('#subTable :checkbox').removeAttr('checked', 'checked'); 
    } 
}); 

Bây giờ, chúng tôi đã phải mang một chức năng mới để thực hiện công việc, .removeAttr(). Để công bằng, this is even how the jQuery documentation does it in the example. Tuy nhiên, bạn có thể cắt mà xuống đáng kể nếu bạn tận dụng bình thường jQuery làm trong nội bộ, như thế này:

$('#checkAll').change(function() { 
    $('#subTable :checkbox').attr('checked', this.checked); 
}); 

---

Đây chỉ là một cái gì đó để giữ trong tâm trí khi bạn mã, quy tắc tương tự appy để .attr('disabled') . Có những khu vực khác mà bình thường cũng xảy ra ... có lẽ sự kiện là rộng nhất trong số họ, nếu bạn tò mò you can see that here, nó đã được thực hiện cho bạn, sử dụng nó :)

Answer 3

Mọi người dường như thực sự bối rối về cách làm điều này trong jQuery. Việc chọn hộp kiểm sẽ dễ dàng hơn và hiệu quả hơn nếu không có hộp kiểm. Sau đây sử dụng sức mạnh của việc lựa chọn và lặp lại trên một danh sách các nút kết hợp với jQuery các couldn't-be-đơn giản hơn DOM checked tài sản của các yếu tố ô trống:

$("#myDiv input:checkbox").each(function() { 
    this.checked = true; 
}); 

Nó không phải quá khó để cắt ra jQuery hoàn toàn trong trường hợp này :

var div = document.getElementById("myDiv"); 
var inputs = div.getElementsByTagName("input"); 
for (var i = 0, len = inputs.length; i < len; ++i) { 
    if (inputs[i].type == "checkbox") { 
     inputs[i].checked = true; 
    } 
} 

CẬP NHẬT

Kể từ khi phát hành jQuery 1.6 và prop(), có một cách lành mạnh để làm điều này trong jQuery:

$("#myDiv input:checkbox").prop("checked", true); 

Answer 4

Đây là công việc trong firefox v.17.01. Chưa thử nghiệm trên các trình duyệt khác.

// Chọn và Kiểm tra hộp kiểm trên tải

$('#enable, #enable1, #enable2, #enable3').attr('checked', 'checked'); 

Xem ví dụ:

JS FIDDLE