วิธีการตั้งค่าตัวเลือกวิทยุตรวจสอบ onload ด้วย jQuery?
จำเป็นต้องตรวจสอบว่าไม่มีการตั้งค่าเริ่มต้นแล้วตั้งค่าเริ่มต้น
วิธีการตั้งค่าตัวเลือกวิทยุตรวจสอบ onload ด้วย jQuery?
จำเป็นต้องตรวจสอบว่าไม่มีการตั้งค่าเริ่มต้นแล้วตั้งค่าเริ่มต้น
คำตอบ:
สมมติว่าคุณมีปุ่มตัวเลือกเช่นนี้ตัวอย่างเช่น:
<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);
}
});
$radios.removeAttr('checked')
ก่อนเสา มันจะสับสนเบราว์เซอร์และค่าโพสต์
แล้วซับหนึ่งอันล่ะ?
$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
อันนี้จะทำให้ form.reset () ล้มเหลว:
$('input:radio[name=gender][value=Male]').attr('checked', true);
แต่อันนี้ใช้ได้ผล:
$('input:radio[name=gender][value=Male]').click();
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
ฉันชอบคำตอบของ @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);
ฉันคิดว่าคุณสามารถสันนิษฐานได้ว่าชื่อนั้นไม่เหมือนใครและวิทยุทั้งหมดในกลุ่มมีชื่อเดียวกัน จากนั้นคุณสามารถใช้การสนับสนุน jQuery เช่นนั้น:
$("[name=gender]").val(["Male"]);
หมายเหตุ: การส่งผ่านอาร์เรย์เป็นสิ่งสำคัญ
รุ่นที่มีเงื่อนไข:
if (!$("[name=gender]:checked").length) {
$("[name=gender]").val(["Male"]);
}
$("*")
มันจะตรงกับทุกอย่างดังนั้นคุณควรใช้ประเภทที่ lease $("input")
หรือ ID จะ จะเหมาะอย่างยิ่งเนื่องจาก DOM มีการโทรในประเทศเพื่อรับองค์ประกอบโดย id
document.querySelectorAll
ทำให้งานทั้งหมด
$("input[name=gender]")
หรือ$("input[name=gender]:radio")
หรือ (สำหรับเบราว์เซอร์รุ่นใหม่)$("input[name=gender][type=radio]")
หากคุณต้องการให้มันเป็นแบบไดนามิกอย่างแท้จริงและเลือกวิทยุที่สอดคล้องกับข้อมูลที่เข้ามาการทำงานนี้ มันใช้ค่าเพศของข้อมูลที่ส่งผ่านหรือใช้ค่าเริ่มต้น
if(data['gender'] == ''){
$('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
$('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
โซลูชัน Native JS:
document.querySelector('input[name=gender][value=Female]').checked = true;
HTML:
<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female
และหากคุณต้องการส่งผ่านค่าจากรุ่นของคุณและต้องการเลือกปุ่มตัวเลือกจากกลุ่มที่โหลดตามค่ามากกว่าการใช้:
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>
ไม่ต้องการทั้งหมด ด้วย HTML ที่เรียบง่ายและเก่าคุณสามารถบรรลุสิ่งที่คุณต้องการ หากคุณให้วิทยุที่คุณต้องการตรวจสอบโดยค่าเริ่มต้นเช่นนี้:
<input type='radio' name='gender' checked='true' value='Male'>
เมื่อโหลดหน้าเว็บมันจะถูกตรวจสอบ
$("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
นี่คือตัวอย่างด้วยวิธีการด้านบน:
<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');
หมายเหตุพฤติกรรมนี้เมื่อรับค่าอินพุตวิทยุ:
$('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()
จะไม่ส่งคืนค่าการตรวจสอบของอินพุตวิทยุตามที่คุณคาดหวังเพราะมันจะส่งคืนค่าของปุ่มตัวเลือกแรก
มีการตรวจสอบ JQuery obtiene solo el elemento
$('input[name="radioInline"]:checked').val()
// ถ้าคุณทำมันบน javascript หรือเฟรมเวิร์กเช่น backbone คุณจะพบสิ่งนี้มากคุณอาจมีอะไรแบบนี้
$MobileRadio = $( '#mobileUrlRadio' );
ในขณะที่
$MobileRadio.checked = true;
จะไม่ทำงาน,
$MobileRadio[0].checked = true;
จะ.
ตัวเลือกของคุณอาจเป็นคนอื่น ๆ ที่แนะนำข้างต้นด้วย
ใช้งานได้กับปุ่มตัวเลือกหลายปุ่ม
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);