Cách đặt tùy chọn radio được kiểm tra khi tải với jQuery

Làm cách nào để đặt tùy chọn radio được kiểm tra khi tải với jQuery?

Cần kiểm tra nếu không có mặc định nào được đặt và sau đó đặt mặc định

Giả sử bạn có các nút radio như thế này, ví dụ:

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

Và bạn muốn kiểm tra cái có giá trị "Nam" khi tải nếu không có radio nào được kiểm tra:

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

Làm thế nào về một lót?

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

Điều này sẽ gây ra lỗi form.reset ():

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

Nhưng cái này hoạt động:

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

JQuery thực sự có hai cách để đặt trạng thái được kiểm tra cho radio và các hộp kiểm và nó phụ thuộc vào việc bạn có đang sử dụng thuộc tính value trong đánh dấu HTML hay không:

Nếu họ có thuộc tính giá trị:

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

Nếu họ không có thuộc tính giá trị:

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

Thêm chi tiết

Trong trường hợp đầu tiên, chúng tôi chỉ định toàn bộ nhóm radio sử dụng tên và báo cho JQuery tìm đài để chọn sử dụng hàm val. Hàm val lấy mảng 1 phần tử và tìm đài có giá trị khớp, đặt giá trị được kiểm tra = true. Những người khác có cùng tên sẽ được bỏ chọn. Nếu không có đài phát thanh nào có giá trị phù hợp được tìm thấy thì tất cả sẽ được bỏ chọn. Nếu có nhiều radio có cùng tên và giá trị thì cái cuối cùng sẽ được chọn và những cái khác sẽ được bỏ chọn.

Nếu bạn không sử dụng thuộc tính value cho radio thì bạn cần sử dụng ID duy nhất để chọn radio cụ thể trong nhóm. Trong trường hợp này, bạn cần sử dụng chức năng chống đỡ để đặt thuộc tính "đã kiểm tra". Nhiều người không sử dụng thuộc tính giá trị với các hộp kiểm, vì vậy # 2 được áp dụng nhiều hơn cho các hộp kiểm sau đó là radio. Cũng lưu ý rằng vì các hộp kiểm không tạo thành nhóm khi chúng có cùng tên, bạn có thể làm $("[name=myCheckBox").prop("checked", true);cho các hộp kiểm.

Bạn có thể chơi với mã này tại đây: http://jsbin.com/OSULAtu/1/edit?html,output

Tôi thích câu trả lời của @Amc. Tôi thấy biểu thức có thể được cô đọng hơn nữa để không sử dụng lệnh gọi bộ lọc () (@chaiko rõ ràng cũng nhận thấy điều này). Ngoài ra, prop () là cách để đi so với attr () cho jQuery v1.6 +, xem tài liệu jQuery cho prop () để biết các thực tiễn tốt nhất chính thức về chủ đề này.

Hãy xem xét các thẻ đầu vào tương tự từ câu trả lời của @Paolo Bergantino.

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

Một lớp lót được cập nhật có thể đọc một cái gì đó như:

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

Tôi nghĩ bạn có thể giả sử, tên đó là duy nhất và tất cả các đài trong nhóm đều có cùng tên. Sau đó, bạn có thể sử dụng hỗ trợ jQuery như thế:

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

Lưu ý: Vượt qua mảng là quan trọng.

Phiên bản có điều kiện:

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

Nếu bạn muốn nó thực sự năng động và chọn radio tương ứng với dữ liệu đến, điều này sẽ hoạt động. Đó là sử dụng giá trị giới tính của dữ liệu được truyền vào hoặc sử dụng mặc định.

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

Giải pháp JS gốc:

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML:

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

Và nếu bạn muốn chuyển một giá trị từ mô hình của mình và muốn chọn nút radio từ nhóm khi tải dựa trên giá trị, hơn là sử dụng:

Câu hỏi:

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

Và 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>

Đừng cần tất cả những thứ đó. Với HTML đơn giản và cũ, bạn có thể đạt được những gì bạn muốn. Nếu bạn để radio bạn muốn kiểm tra theo mặc định như thế này:
<input type='radio' name='gender' checked='true' value='Male'>
Khi tải trang, nó sẽ được kiểm tra.

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

Dưới đây là ví dụ với các phương pháp trên:

<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>

Trong javascript:

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

Lưu ý hành vi này khi nhận các giá trị đầu vào radio:

$('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() ); 

});

Vì vậy, $('input[name="myRadio"]').val()không trả về giá trị đã kiểm tra của đầu vào radio, như bạn mong đợi - nó sẽ trả về giá trị của nút radio đầu tiên.

De esta forma Jquery obtiene solo el Elemento đã kiểm tra

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

// Nếu bạn đang làm nó trên javascript hoặc một khung như xương sống, bạn sẽ gặp điều này rất nhiều, bạn có thể có một cái gì đó như thế này

$MobileRadio = $( '#mobileUrlRadio' );

trong khi

$MobileRadio.checked = true;

sẽ không làm việc,

$MobileRadio[0].checked = true;

sẽ.

bộ chọn của bạn có thể được như những người khác ở trên đề nghị quá.

Điều này hoạt động cho nhiều nút radio

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);