.prop ('checked', false) หรือ. removeAttr ('checked')?

115

ด้วยการแนะนำวิธีการ prop ตอนนี้ฉันจำเป็นต้องรู้วิธีที่ยอมรับในการยกเลิกการเลือกช่องทำเครื่องหมาย ใช่ไหม:

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

หรือ

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

jquery

— ฟิลลิปเซ็นน์
แหล่งที่มา

4

คุณอ่านโพสต์ของ John Resig แล้วหรือยัง? ejohn.org/blog/jquery-16-and-attr

— Jared Farrish

130

jQuery 3

ตั้งแต่ jQuery 3 removeAttrไม่ได้ตั้งค่าคุณสมบัติที่เกี่ยวข้องเป็นfalseอีกต่อไป:

ก่อนที่จะ jQuery 3.0 ใช้.removeAttr()ในแอตทริบิวต์แบบบูลเช่นchecked, selectedหรือยังจะตั้งชื่อที่สอดคล้องกับคุณสมบัติการreadonly falseลักษณะการทำงานนี้จำเป็นสำหรับ Internet Explorer เวอร์ชันเก่า แต่ไม่ถูกต้องสำหรับเบราว์เซอร์รุ่นใหม่เนื่องจากแอตทริบิวต์แสดงถึงค่าเริ่มต้นและคุณสมบัติแทนค่าปัจจุบัน (ไดนามิก)

การใช้.removeAttr( "checked" )องค์ประกอบ DOM เป็นเรื่องที่ผิดพลาดเกือบตลอดเวลา ครั้งเดียวที่อาจมีประโยชน์คือถ้า DOM ต่อมาจะถูกทำให้เป็นอนุกรมกลับเป็นสตริง HTML ในกรณีอื่น ๆ ทั้งหมด.prop( "checked", false )ควรใช้แทน

การเปลี่ยนแปลง

ดังนั้นจึง.prop('checked',false)เป็นวิธีที่ถูกต้องเมื่อใช้เวอร์ชันนี้เท่านั้น

คำตอบเดิม (จากปี 2554):

สำหรับแอตทริบิวต์ที่มีพื้นฐานคุณสมบัติบูลีน (ซึ่งcheckedเป็นหนึ่ง) โดยอัตโนมัติชุดต้นแบบคุณสมบัติการremoveAttr false(โปรดทราบว่านี่เป็นหนึ่งใน "โปรแกรมฟิกซ์" ที่เข้ากันได้แบบย้อนหลังที่เพิ่มใน jQuery 1.6.1)

ดังนั้นทั้งสองจะได้ผล ... แต่ตัวอย่างที่สองที่คุณให้ (ใช้prop) นั้นถูกต้องมากกว่าของทั้งสอง หากเป้าหมายของคุณคือการยกเลิกการเลือกช่องทำเครื่องหมายคุณต้องการให้มีผลกับคุณสมบัติไม่ใช่แอตทริบิวต์และไม่จำเป็นต้องremoveAttrดำเนินการดังกล่าว

— ความเรียบของจอห์น
แหล่งที่มา

36

@tandu: คุณทำได้แต่ไม่ควรทำ จากเอกสาร: " หมายเหตุ:อย่าใช้ [ removeProp()] เพื่อลบคุณสมบัติดั้งเดิมเช่นเลือกปิดใช้งานหรือเลือกการดำเนินการนี้จะลบคุณสมบัติทั้งหมดและเมื่อนำออกแล้วจะไม่สามารถเพิ่มเข้าไปในองค์ประกอบได้อีกใช้.prop()เพื่อตั้งค่าคุณสมบัติเหล่านี้เป็นเท็จ แทน." removePropมีไว้สำหรับใช้กับคุณสมบัติที่กำหนดเองเท่านั้น

— John Flatness

17

ใช้checked: คุณสมบัติจริงเท็จของช่องทำเครื่องหมาย

jQuery:

if($('input[type=checkbox]').is(':checked')) {
    $(this).prop('checked',true);
} else {
    $(this).prop('checked',false);
}

— สุรัชราวัต
แหล่งที่มา

เราสามารถกำจัด if, else โดยใช้ซับเดียว, $ (this) .prop ('checked', $ ('input [type = checkbox]'). is (': checked'));

— Yousaf Hassan

8

ฉันแนะนำให้ใช้ทั้ง prop และ attr เพราะฉันมีปัญหากับ Chrome และฉันแก้ไขโดยใช้ทั้งสองฟังก์ชั่น

if ($(':checkbox').is(':checked')){
    $(':checkbox').prop('checked', true).attr('checked', 'checked');
}
else {
    $(':checkbox').prop('checked', false).removeAttr('checked');
}

— Ragnar
แหล่งที่มา

ใช่สำหรับโครเมี่ยมให้ใช้: $("input[type='checkbox'], input[type='radio']").prop("checked", false).attr("checked", false).removeAttr("checked");

— ก้าน

ฉันใช้คอมโพเนนต์ที่กำหนดเอง (CSS + JS) เพื่อแทนที่วิทยุอินพุตและช่องทำเครื่องหมาย นี่เป็นวิธีเดียวที่เหมาะกับฉัน ขอบคุณ!

— Silvio Delgado

3

อีกทางเลือกหนึ่งในการทำสิ่งเดียวกันคือการกรองแอตทริบิวต์type = checkbox :

$('input[type="checkbox"]').removeAttr('checked');

หรือ

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

โปรดจำไว้ว่าความแตกต่างระหว่างแอตทริบิวต์และคุณสมบัติอาจมีความสำคัญในสถานการณ์เฉพาะ ก่อนjQuery 1.6บางครั้งเมธอด .attr () จะนำค่าคุณสมบัติมาพิจารณาเมื่อดึงแอตทริบิวต์บางอย่างซึ่งอาจทำให้เกิดพฤติกรรมที่ไม่สอดคล้องกัน ในขณะที่ jQuery 1.6 เมธอด. prop () มีวิธีการดึงค่าคุณสมบัติอย่างชัดเจนในขณะที่ .attr () ดึงแอ็ตทริบิวต์

รู้เพิ่มเติม ...

— tonnoz
แหล่งที่มา

2

คำถามคือ "ข้อใดถูกต้องกว่า" ไม่ใช่ "มีวิธีอื่นในการทำเช่นนี้หรือไม่" ดูเหมือนคุณจะไม่ได้พยายามตอบคำถาม

— Andrew Stubbs