วิธีการตั้งค่าตัวเลือกวิทยุตรวจสอบ onload ด้วย jQuery


297

วิธีการตั้งค่าตัวเลือกวิทยุตรวจสอบ onload ด้วย jQuery?

จำเป็นต้องตรวจสอบว่าไม่มีการตั้งค่าเริ่มต้นแล้วตั้งค่าเริ่มต้น


1
@ryenus คำถามอื่น ๆ จะไม่ซ้ำซ้อนกับฉันตั้งแต่ฉันถามฉันก่อนคำถามอื่นหรือไม่
Phill Pafford

คำตอบ:


558

สมมติว่าคุณมีปุ่มตัวเลือกเช่นนี้ตัวอย่างเช่น:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

และคุณต้องการตรวจสอบสิ่งที่มีค่าเป็น "ชาย" onload หากไม่มีการตรวจสอบวิทยุ:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});

เพียงแค่สงสัย Paolo ข้อมูลจำเพาะของ IIRC บอกว่าแอตทริบิวต์ที่ถูกตรวจสอบนั้นหมายถึงการตรวจสอบ = "ตรวจสอบแล้ว" (แม้ว่าฉันอาจจะผิด) jQuery แปลความจริงเป็น 'ตรวจสอบ' ในตัวอย่างนี้หรือไม่? เพียงแค่อยากรู้อยากเห็น ...
alex

8
ตัวอย่างดั้งเดิมของฉันมี 'ตรวจสอบ', 'ตรวจสอบ' เป็นหนึ่งในสิ่งเหล่านั้นที่ฉันจำไม่ได้ว่าอันไหนถูก jQuery คิดว่ามันออกมาในทางใดทางหนึ่ง แต่ฉันรู้ว่าถ้าคุณต้องการตั้งค่าคุณสมบัติการตรวจสอบจริงขององค์ประกอบ DOM มันควรจะเป็นบูลีนเช่น document.getElementById ('x') checked = true; - ดังนั้นฉันจึงไปกับสิ่งนั้น
เปาโล Bergantino

เพียงแค่ต้องการเพิ่มเครื่องหมายวงเล็บเหลี่ยม [ชื่อ = เพศ] ไม่ทำงานในเบราว์เซอร์หุ้นของ windows phone 7
白目

ฉันเพิ่งลองใช้กับ FF และ jQuery 1.9.1 และ .attr ('ตรวจสอบแล้ว' จริง); ไม่ทำงานอย่างไรก็ตาม .prop ('ตรวจสอบแล้ว' จริง); ทำ. ดูstackoverflow.com/questions/4618733/… (ซ้ำกัน?)
IARI

สิ่งที่รวดเร็ว: อย่าใช้$radios.removeAttr('checked')ก่อนเสา มันจะสับสนเบราว์เซอร์และค่าโพสต์
igasparetto

109

แล้วซับหนึ่งอันล่ะ?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

ด้านบนดีกว่าเนื่องจากรองรับค่าชื่อที่ซับซ้อนมากขึ้น
J. Martin

13
นี้ไม่ตอบคำถาม ops ทั้งหมด - มันต้องตรวจสอบว่าตัวเลือกเริ่มต้นมีการตรวจสอบแล้วก่อน นอกจากนี้คุณควรใช้ prop () แทน attr () สำหรับสิ่งนี้ สำหรับคำอธิบายดู "แอตทริบิวต์เทียบกับคุณสมบัติ" ส่วนที่นี่: api.jquery.com/prop นอกจากนี้ไม่จำเป็นต้องใช้ตัวกรองพิเศษคุณสามารถรวมตัวเลือก 2 ตัวเช่น $ ("อินพุต [ชื่อ = เพศ]] [ค่า = ชาย]") เสา ("ตรวจสอบแล้ว" จริง);
jackocnr

3
วิธีนี้ใช้งานได้เป็นครั้งแรกที่ฉันตั้งค่าวิทยุ แต่ล้มเหลวหลังจากนั้น โดยใช้ "prop" แทน "attr" มันทำงานได้อย่างสมบูรณ์ ดังนั้น: $ ('input: radio [name = "gender"]'). filter ('[value = "Male"]'). prop ('ตรวจสอบแล้ว' จริง);
แอนดรู

2
ถูกต้อง - prop () เป็นวิธีที่แนะนำในการเข้าถึงคุณสมบัติ
Andrew McCombe

1
เรียบง่าย: $ ('อินพุต: วิทยุ [ชื่อ = "เพศ"] [ค่า = "ชาย"]'). attr ('ตรวจสอบแล้ว' จริง);
Régis

52

อันนี้จะทำให้ form.reset () ล้มเหลว:

$('input:radio[name=gender][value=Male]').attr('checked', true);

แต่อันนี้ใช้ได้ผล:

$('input:radio[name=gender][value=Male]').click();

5
ฉันอยากจะแนะนำให้คุณใช้ทริกเกอร์ ('คลิก') บิตอ่านง่ายขึ้นและหยุดการโทรวิธี
Barkermn01

35

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

หากพวกเขามีคุณลักษณะค่า:

$("[name=myRadio]").val(["myValue"]);

หากพวกเขาไม่มีคุณสมบัติค่า:

$("#myRadio1").prop("checked", true);

รายละเอียดเพิ่มเติม

ในกรณีแรกเราระบุกลุ่มวิทยุทั้งหมดโดยใช้ชื่อและบอก JQuery เพื่อค้นหาวิทยุเพื่อเลือกโดยใช้ฟังก์ชั่นวาล ฟังก์ชัน val ใช้อาร์เรย์แบบ 1 องค์ประกอบและค้นหาวิทยุที่มีค่าที่ตรงกันตั้งค่า checked = true บุคคลอื่นที่มีชื่อเดียวกันจะถูกยกเลิกการเลือก หากไม่พบวิทยุที่มีค่าตรงกันจะยกเลิกการเลือกทั้งหมด หากมีวิทยุหลายตัวที่มีชื่อและค่าเหมือนกันจะมีการเลือกวิทยุตัวสุดท้ายและรายการอื่น ๆ จะถูกยกเลิกการเลือก

หากคุณไม่ได้ใช้แอททริบิวต์ค่าสำหรับรายการวิทยุคุณต้องใช้ ID เฉพาะเพื่อเลือกรายการวิทยุเฉพาะในกลุ่ม ในกรณีนี้คุณต้องใช้ฟังก์ชั่น prop เพื่อตั้งค่าคุณสมบัติ "checked" หลายคนไม่ได้ใช้คุณลักษณะค่าพร้อมช่องทำเครื่องหมายดังนั้น # 2 จึงมีความเหมาะสมมากกว่าสำหรับช่องทำเครื่องหมายและวิทยุ นอกจากนี้โปรดทราบว่าเนื่องจากช่องทำเครื่องหมายไม่ได้จัดกลุ่มเมื่อมีชื่อเหมือนกันคุณสามารถทำ$("[name=myCheckBox").prop("checked", true);เครื่องหมายในช่องทำเครื่องหมายได้

คุณสามารถเล่นกับรหัสนี้ได้ที่นี่: http://jsbin.com/OSULAtu/1/edit?html,output


22

ฉันชอบคำตอบของ @Amc ฉันพบว่านิพจน์สามารถย่อตัวลงอีกโดยไม่ใช้ตัวกรอง () การโทร (@chaiko เห็นได้ชัดว่ายังสังเกตเห็นสิ่งนี้) นอกจากนี้ prop () เป็นวิธีที่จะไปเทียบกับ attr () สำหรับ jQuery v1.6 + ดูที่เอกสาร jQuery สำหรับ prop ()สำหรับแนวทางปฏิบัติที่ดีที่สุดอย่างเป็นทางการในเรื่อง

พิจารณาแท็กอินพุตเดียวกันจากคำตอบของ @Paolo Bergantino

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

ซับในที่อัปเดตอาจอ่านดังนี้:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

15

ฉันคิดว่าคุณสามารถสันนิษฐานได้ว่าชื่อนั้นไม่เหมือนใครและวิทยุทั้งหมดในกลุ่มมีชื่อเดียวกัน จากนั้นคุณสามารถใช้การสนับสนุน jQuery เช่นนั้น:

$("[name=gender]").val(["Male"]);

หมายเหตุ: การส่งผ่านอาร์เรย์เป็นสิ่งสำคัญ

รุ่นที่มีเงื่อนไข:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

1
นี่เป็นสิ่งที่ไม่ดีที่คุณจะสแกนองค์ประกอบทุกอย่างเพื่อค่าฉันไม่แนะนำให้ใช้สิ่งนี้ตลอดไป
Barkermn01

@MartinBarker คุณสามารถอธิบายสิ่งที่ผู้ชายคุณทำโดย 'สแกน'
Saram

ค้นหา DOM หากคุณใช้อะไรเลยนอกจากแอตทริบิวต์ที่บังคับให้ jQuery ของคุณไปถึงทุกองค์ประกอบใน DOM และตรวจสอบว่าตรงกันหรือไม่ถ้าคุณใช้$("*")มันจะตรงกับทุกอย่างดังนั้นคุณควรใช้ประเภทที่ lease $("input")หรือ ID จะ จะเหมาะอย่างยิ่งเนื่องจาก DOM มีการโทรในประเทศเพื่อรับองค์ประกอบโดย id
Barkermn01

@MartinBarker - ฉันเห็นด้วย ฉันมักจะเลือกคำนำหน้าด้วยรหัสแบบฟอร์มหรือให้บริบทพารามิเตอร์ ในปัจจุบันการสแกน DOM ไม่ใช่ jQuery แต่เป็นโปรแกรมเบราว์เซอร์ภายในdocument.querySelectorAllทำให้งานทั้งหมด
Saram

หากต้องการแก้ไขข้อกังวลข้างต้นให้ใช้$("input[name=gender]")หรือ$("input[name=gender]:radio")หรือ (สำหรับเบราว์เซอร์รุ่นใหม่)$("input[name=gender][type=radio]")
David Balažic

7

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

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};


3

และหากคุณต้องการส่งผ่านค่าจากรุ่นของคุณและต้องการเลือกปุ่มตัวเลือกจากกลุ่มที่โหลดตามค่ามากกว่าการใช้:

jquery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

และ HTML:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

2

ไม่ต้องการทั้งหมด ด้วย HTML ที่เรียบง่ายและเก่าคุณสามารถบรรลุสิ่งที่คุณต้องการ หากคุณให้วิทยุที่คุณต้องการตรวจสอบโดยค่าเริ่มต้นเช่นนี้:
<input type='radio' name='gender' checked='true' value='Male'>
เมื่อโหลดหน้าเว็บมันจะถูกตรวจสอบ


3
ใช่ แต่ฉันต้องการให้เป็นแบบไดนามิกเนื่องจากไซต์ที่อ้างอิงจะผ่านในค่าเริ่มต้นในการโหลดหน้าเว็บ เป็นเวลานานแล้วที่ฉันคิดถึงคำถามนี้ดังนั้นฉันหวังว่าฉันจะเข้าใจสิ่งที่คุณกำลังจะพูด
Phill Pafford


2

นี่คือตัวอย่างด้วยวิธีการด้านบน:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

ในจาวาสคริปต์:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

1

หมายเหตุพฤติกรรมนี้เมื่อรับค่าอินพุตวิทยุ:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

ดังนั้น$('input[name="myRadio"]').val()จะไม่ส่งคืนค่าการตรวจสอบของอินพุตวิทยุตามที่คุณคาดหวังเพราะมันจะส่งคืนค่าของปุ่มตัวเลือกแรก


1

มีการตรวจสอบ JQuery obtiene solo el elemento

$('input[name="radioInline"]:checked').val()

2
คุณต้องอธิบายคำตอบของคุณและจัดรูปแบบโค้ดของคุณ
Michael

0

// ถ้าคุณทำมันบน javascript หรือเฟรมเวิร์กเช่น backbone คุณจะพบสิ่งนี้มากคุณอาจมีอะไรแบบนี้

$MobileRadio = $( '#mobileUrlRadio' );

ในขณะที่

$MobileRadio.checked = true;

จะไม่ทำงาน,

$MobileRadio[0].checked = true;

จะ.

ตัวเลือกของคุณอาจเป็นคนอื่น ๆ ที่แนะนำข้างต้นด้วย


0

ใช้งานได้กับปุ่มตัวเลือกหลายปุ่ม

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.