ตั้งค่าวิทยุที่เลือกจากกลุ่มวิทยุด้วยค่า


153

ทำไมฉันต้องดิ้นรนกับเรื่องนี้?

ฉันมีค่า: 5

ฉันจะตรวจสอบปุ่มตัวเลือกของกลุ่ม "mygroup" ด้วยค่า 5 ได้อย่างไร

$("input[name=mygroup]").val(5); // doesn't work?

คำตอบ:


351

ด้วยความช่วยเหลือของตัวเลือกคุณสมบัติที่คุณสามารถเลือกองค์ประกอบการป้อนข้อมูลที่มีค่าที่สอดคล้องกัน จากนั้นคุณต้องตั้งค่าแอตทริบิวต์อย่างชัดเจนโดยใช้.attr:

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

ตั้งแต่ jQuery 1.6 คุณยังสามารถใช้.propวิธีที่มีค่าบูลีน (ซึ่งควรเป็นวิธีที่ต้องการ):

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

โปรดจำไว้ว่าคุณต้องลบแอตทริบิวต์ที่เลือกไว้ออกจากปุ่มตัวเลือกใด ๆ ภายใต้กลุ่มปุ่มตัวเลือกเดียวจากนั้นคุณจะสามารถเพิ่มคุณสมบัติ / คุณสมบัติที่ตรวจสอบแล้วไปยังปุ่มตัวเลือกปุ่มใดตัวหนึ่งในกลุ่มปุ่มตัวเลือกนั้น

รหัสเพื่อลบแอททริบิวต์ที่เลือกจากปุ่มตัวเลือกทั้งหมดของกลุ่มปุ่มตัวเลือกหนึ่ง -

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

.prop ('ตรวจสอบแล้ว' จริง) น่าจะดีกว่าหรือ. is ()
bladefist

3
@bladefist: .isจะไม่ช่วยนี่ .propแต่ผมเห็นด้วยกับ ไม่สามารถใช้งานได้ในตอนนั้น;) จะอัปเดตคำตอบของฉัน ขอบคุณ!
เฟลิกซ์คลิง

4
หากค่าของปุ่มตัวเลือกมีทศนิยมคุณต้องใส่ค่าในเครื่องหมายคำพูด
Robert

1
@ Robert: ใช่อาจเป็นไปได้ จากเอกสาร : "สามารถเป็นได้ทั้งคำเดียวหรือสตริงที่ยกมา"
Felix Kling

5
ดูคำตอบของโจนาธาน เอกสาร jQuery แสดงว่า.val()สนับสนุนการตั้งค่าในกลุ่มวิทยุหรือช่องทำเครื่องหมาย คำตอบของวิธีนี้ใช้งานได้ทางเทคนิค แต่เป็นวงเวียนและอ่าน / จดจำได้น้อยกว่ามาก
jinglesthula

144

มีวิธีที่ดีกว่าในการตรวจสอบวิทยุและช่องทำเครื่องหมายคือ คุณต้องผ่านอาร์เรย์ของค่าไปยังวิธี val แทนค่า raw

หมายเหตุ:หากคุณเพียงแค่ส่งค่าด้วยตัวเอง (โดยไม่ต้องอยู่ภายในอาร์เรย์ ) นั่นจะส่งผลให้ค่าทั้งหมดของ "mygroup" ถูกตั้งค่าเป็นค่า

$("input[name=mygroup]").val([5]);

นี่คือเอกสาร jQuery ที่อธิบายวิธีการทำงาน: http://api.jquery.com/val/#val-value

และ.val([...])ยังทำงานร่วมกับองค์ประกอบของแบบฟอร์มเหมือน<input type="checkbox">, <input type="radio">และ<option>s <select>ภายในของ

อินพุตและตัวเลือกที่มีค่าที่ตรงกับหนึ่งในองค์ประกอบของอาร์เรย์จะถูกตรวจสอบหรือเลือกในขณะที่ผู้ที่มีค่าที่ไม่ตรงกับหนึ่งในองค์ประกอบของอาร์เรย์จะถูกยกเลิกการเลือกหรือยกเลิกการเลือก

ซอแสดงให้เห็นถึงการทำงานนี้: https://jsfiddle.net/92nekvp3/


คำตอบที่ยอมรับ (ดีควรจะ) ตั้งแต่ jQuery 1.0 ดูตัวอย่างล่าสุดจาก docs (เลื่อนไปด้านล่าง): api.jquery.com/valคัดลอกมาที่นี่: jsfiddle.net/JoePC/w1f9ykso
JoePC

นี่เป็นวิธีที่ดีและสอดคล้องกันในการตั้งค่าอินพุตทั้งหมด น่าเสียดายที่ฉันใช้เวลา 6 ปีในการเรียนรู้
Jeff Lowery

1
ใช้เวลาสักครู่เพื่อพยายามหาสาเหตุว่าทำไมค่าทั้งหมดของฉันในกลุ่มจึงถูกตั้งค่าเป็นค่าที่ส่งแทนที่จะตรวจสอบค่า ปรากฎว่าฉันผ่านค่าด้วยตัวเองไม่ได้อยู่ในอาร์เรย์
OXiGEN

14

ลองสิ่งนี้:

$('input:radio[name="mygroup"][value="5"]').attr('checked',true);

สาธิต JS ซอ


1
@ ฮันเตอร์ขอบคุณ ... วันนี้ไม่ใช่วันของฉันอย่างชัดเจนสำหรับ jQuery ... = /
David บอกว่าจะคืนสถานะโมนิก้า


7

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

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');


1

หรือคุณสามารถเขียนค่าคุณลักษณะลงไปได้:

$(':radio[value=<yourvalue>]').attr('checked',true);

มันใช้งานได้สำหรับฉัน


0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}

4
คุณกรุณาอธิบายว่ารหัสของคุณทำอะไรในคำตอบของคุณ? อย่างน้อยหนึ่งประโยคหรือมากกว่านั้น และวิธีแก้ปัญหา ขอบคุณ.
Alex


-1
$('input[name="mygroup"]').val([5])

1
คุณช่วยอธิบายว่าอะไรที่ทำให้โซลูชันของคุณแตกต่างจากโซลูชันอื่นที่มีอยู่แล้ว
Giovani Vercauteren

@Giovani Vercauteren เราควรตั้งชื่อเป็นสตริง ดังนั้นฉันให้ mygroup เป็นสตริงในรหัส
Anjitha
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.