JS.checked vs jquery attr ('checked'), sự khác biệt là gì?

Question

Tôi không thể tìm ra điều này. Theo số W3 Schools, thuộc tính đã chọn đặt hoặc trả lại trạng thái đã chọn của hộp kiểm.

Vậy tại sao $('input').checked ? $('div').slideDown() : $('div').slideUp(); không hoạt động?

Tuy nhiên, sử dụng công cụ chống đỡ sẽ hoạt động.

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp();

này là dành cho một hộp kiểm đó được kiểm tra dựa trên một giá trị cơ sở dữ liệu.

Answer 1

checked là thuộc tính phần tử DOM để sử dụng nó trên các phần tử DOM thay vì các đối tượng jQuery.

$('input')[0].checked 

nếu bạn có một đối tượng jQuery, sử dụng prop thay vì attr kể từ khi bạn đang kiểm tra một tài sản. Chỉ cần làm tham chiếu:

$("<input type='checkbox' checked='checked'>").attr("checked") // "checked" 
$("<input type='checkbox' checked='foo'>").attr("checked") // "checked" 
$("<input type='checkbox' checked>").attr("checked") // "checked" 
$("<input type='checkbox'>").attr("checked") // undefined 

sẽ trả về giá trị thực tế.

prop sẽ trở lại true hoặc false dựa trên hay không thuộc tính tồn tại ở tất cả các

Answer 2

checked là thuộc tính của đối tượng DOM, không phải đối tượng jQuery. Để làm cho nó hoạt động, bạn phải có đối tượng DOM:

$('input')[0].checked; 

Bạn cũng có thể làm .is(':checked').

Answer 3

$ ('đầu vào') trả về một đối tượng JQuery và nó không có tài sản kiểm tra. Bạn có thể sử dụng $ ('input') [0] .check.

Answer 4

$('input').attr('checked') là lỗi thời và ta nên sử dụng $('input').prop('checked')
Hơn nữa, $('input').checked sẽ không làm việc như $('input') là đối tượng jquery và checked là tài sản vì vậy đó là lý do tại sao jquery đã đưa ra $('input').prop('checked') để truy cập tài sản.

Tuy nhiên để chuyển đổi đối tượng jQuery để DOM đối tượng bạn cần làm
$('input')[0].checked này trở thành đối tượng DOM và sau đó bạn có thể truy cập trực tiếp khách sạn với .

Nhưng với jquery để truy cập tài sản ta nên sử dụng này:

$('input').prop('checked') ? $('div').slideDown() : $('div').slideUp(); 

Hy vọng điều này sẽ giúp ích !!

Answer 5

Trong trường hợp này, bạn cần prop() hơn attr(), cuộc gọi thay thế để attr() với prop() trong mã của bạn thường sẽ làm việc.

Từhttp://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/

Sự khác biệt giữa các thuộc tính và các tài sản có thể quan trọng trong những tình huống cụ thể. Trước jQuery 1,6, phương pháp .attr() đôi khi tính đến các giá trị thuộc tính khi truy xuất một số thuộc tính, điều này có thể gây ra hành vi không nhất quán. Kể từ jQuery 1.6, phương thức .prop() cung cấp cách để truy lục một cách rõ ràng các giá trị thuộc tính, trong khi .attr() truy lục các thuộc tính.

elem.checked ==== true (Boolean) sẽ thay đổi theo trạng thái hộp kiểm

$(elem).prop("checked") ==== true (Boolean) sẽ thay đổi theo trạng thái hộp kiểm

elem.getAttribute("checked") ===== "checked" (String) trạng thái ban đầu của hộp kiểm; không thay đổi

$(elem).attr("checked") (1.6) ===== "checked" (String) Trạng thái ban đầu của hộp kiểm; không thay đổi

$(elem).attr("checked") (1.6.1+) ======== "checked" (String) sẽ thay đổi theo trạng thái hộp kiểm

$(elem).attr("checked") (pre-1.6) ======= true (Boolean) Changed với trạng thái hộp kiểm

Cũng url này sẽ giúp bạn nhiều hơn về truy vấn của bạn .prop() vs .attr()

Một sự khác biệt của /is-checked-vs-attr-checked-checked/7 trên http://jsperf.com/is-checked-vs-attr-checked-checked/7

Cũng để hiểu 0.123.tham khảo http://christierney.com/2011/05/06/understanding-jquery-1-6s-dom-attribute-and-properties/ http://jsperf.com/is-checked-vs-attr-checked-checked/7