วิธีรีเซ็ตปุ่มเรดิโอใน jQuery เพื่อให้ไม่มีการตรวจสอบ

ฉันมีปุ่มตัวเลือกใน HTML ดังนี้:

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

สิ่งนี้อยู่ในแท็กแบบฟอร์มและเมื่อผู้ใช้ส่งแบบฟอร์มฉันต้องการให้ปุ่มตัวเลือกทั้งหมดกลับสู่ค่าเริ่มต้น ความหมายไม่มีการตรวจสอบ

ฉันมีรหัสนี้ แต่มีข้อผิดพลาดว่า [0] is null or not an object

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

ฉันกำลังทำสิ่งนี้ใน IE 6

ใน jQuery เวอร์ชันก่อน 1.6 ให้ใช้:

$('input[name="correctAnswer"]').attr('checked', false);

ในเวอร์ชันของ jQuery หลังจาก 1.6 คุณควรใช้:

$('input[name="correctAnswer"]').prop('checked', false);

แต่ถ้าคุณใช้ 1.6.1+ คุณสามารถใช้แบบฟอร์มแรกได้ (ดูหมายเหตุ 2 ด้านล่าง)

หมายเหตุ 1:สิ่งสำคัญคืออาร์กิวเมนต์ที่สองเป็นเท็จและไม่ใช่"เท็จ"เนื่องจาก"เท็จ"ไม่ใช่ค่าที่เป็นเท็จ กล่าวคือ

if ("false") {
    alert("Truthy value. You will see an alert");
}

หมายเหตุ 2:สำหรับ jQuery 1.6.0 ตอนนี้มีสองวิธีที่คล้ายกัน.attrและ.propทำสองสิ่งที่เกี่ยวข้องกัน แต่แตกต่างกันเล็กน้อย หากในกรณีนี้คำแนะนำที่ให้ไว้ข้างต้นใช้งานได้หากคุณใช้ 1.6.1+ ข้างต้นจะใช้ไม่ได้กับ 1.6.0 หากคุณใช้ 1.6.0 คุณควรอัปเกรด หากคุณต้องการรายละเอียดโปรดอ่านต่อไป

รายละเอียด:เมื่อทำงานร่วมกับองค์ประกอบ DOM HTML ตรงมีคุณสมบัติยึดติดอยู่กับองค์ประกอบ DOM (การchecked, type, valueฯลฯ ) ที่ให้ติดต่อไปที่สถานะการทำงานของหน้าเว็บ HTML นอกจากนี้ยังมี.getAttribute/ .setAttributeinterface ที่ให้การเข้าถึงค่าแอตทริบิวต์ HTML ตามที่ระบุไว้ใน HTML ก่อน 1.6 jQuery จะเบลอความแตกต่างโดยระบุวิธีการเดียว.attrเพื่อเข้าถึงค่าทั้งสองประเภท jQuery 1.6+ มีสองวิธี.attrและ.propเพื่อแยกความแตกต่างระหว่างสถานการณ์เหล่านี้

.propอนุญาตให้คุณตั้งค่าคุณสมบัติในองค์ประกอบ DOM ในขณะที่.attrอนุญาตให้คุณตั้งค่าแอตทริบิวต์ HTML หากคุณกำลังทำงานกับ DOM ธรรมดาและตั้งค่าคุณสมบัติที่ถูกตรวจสอบelem.checkedเป็นtrueหรือfalseคุณเปลี่ยนค่าที่กำลังทำงานอยู่ (สิ่งที่ผู้ใช้เห็น) และค่าที่ส่งคืนจะติดตามสถานะบนเพจ elem.getAttribute('checked')อย่างไรก็ตามจะคืนค่าสถานะเริ่มต้นเท่านั้น (และส่งคืน'checked'หรือundefinedขึ้นอยู่กับสถานะเริ่มต้นจาก HTML) ใน 1.6.1+ ใช้.attr('checked', false)ทั้งสองอย่างelem.removeAttribute('checked')และelem.checked = falseเนื่องจากการเปลี่ยนแปลงทำให้เกิดปัญหาความเข้ากันได้ย้อนหลังจำนวนมากและไม่สามารถบอกได้ว่าคุณต้องการตั้งค่าแอตทริบิวต์ HTML หรือคุณสมบัติ DOM ดูข้อมูลเพิ่มเติมในเอกสารสำหรับ . prop

วิธีที่ดีที่สุดในการตั้งสถานะ radiobuttons ใน jquery:

HTML:

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

รหัส Jquery (1.4+) เพื่อเลือกปุ่มเดียวล่วงหน้า:

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

ในโค้ด Jquery 1.6+ ควรใช้เมธอด. prop ():

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

ในการยกเลิกการเลือกปุ่ม:

$("[name=color]").removeAttr("checked");

ปัญหาของคุณคือตัวเลือกแอตทริบิวต์ไม่ได้ขึ้นต้นด้วยไฟล์@.

ลองสิ่งนี้:

$('input[name="correctAnswer"]').attr('checked', false);

$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');

ในที่สุดหลังจากการทดสอบหลายครั้งฉันคิดว่าวิธีที่สะดวกและมีประสิทธิภาพที่สุดในการตั้งค่าล่วงหน้าคือ:

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

จำเป็นต้องมีการรีเฟรชกับวัตถุ JQueryUI

การดึงค่าเป็นเรื่องง่าย:

alert($('input[name=correctAnswer]:checked').val())

ทดสอบด้วย JQuery 1.6.1, JQuery UI 1.8

ฉันรู้ว่านี่เป็นเรื่องเก่าและนี่เป็นหัวข้อเล็กน้อย แต่สมมติว่าคุณต้องการยกเลิกการเลือกเฉพาะปุ่มตัวเลือกเฉพาะในคอลเล็กชัน:

$("#go").click(function(){
    $("input[name='correctAnswer']").each(function(){
      if($(this).val() !== "1"){
        $(this).prop("checked",false);
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

และหากคุณกำลังจัดการกับรายการ radiobutton คุณสามารถใช้: ตัวเลือกที่เลือกเพื่อรับรายการที่คุณต้องการ

$("#go").click(function(){
  $("input[name='correctAnswer']:checked").prop("checked",false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

ชุดปุ่มตัวเลือกตรวจสอบผ่าน jquery:

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

รหัส jquery:

$('div#somediv input:radio:nth(0)').attr("checked","checked");

หากคุณต้องการล้างปุ่มตัวเลือกทั้งหมดใน DOM:

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

<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

แม้ว่าเสาจะเปลี่ยนสถานะที่ตรวจสอบแล้ว แต่การเปลี่ยนแปลงยังแสดงให้เห็นว่าในแบบฟอร์ม

$('input[name="correctAnswer"]').prop('checked', false).change();

ที่คุณมี: <input type="radio" name="enddate" value="1" />

หลังจากค่า = "1" คุณยังสามารถเพิ่ม unchecked =" false" />

จากนั้นบรรทัดจะเป็น:

<input type="radio" name="enddate" value="1" unchecked =" false" />

ตั้งค่าปุ่มตัวเลือกทั้งหมดกลับเป็นค่าเริ่มต้น:

$("input[name='correctAnswer']").checkboxradio( "refresh" );

ทำไมคุณไม่ทำ:

$("#radio1, #radio2, #radio3, #radio4").checked = false;