jQuery로 라디오 옵션 검사 onload를 설정하는 방법

jQuery로 라디오 옵션 검사 onload를 설정하는 방법은 무엇입니까?

기본값이 설정되어 있지 않은지 확인한 다음 기본값을 설정해야합니다.

예를 들어 다음과 같은 라디오 버튼이 있다고 가정하십시오.

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

라디오를 확인하지 않으면 "Male"onload 값을 가진 것을 확인하려고합니다.

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

하나의 라이너는 어떻습니까?

$('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 마크 업에서 value 속성을 사용하는지 여부에 따라 다릅니다.

값 속성이있는 경우 :

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

값 속성이없는 경우 :

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

자세한 내용은

첫 번째 경우 이름을 사용하여 전체 라디오 그룹을 지정하고 val 함수를 사용하여 선택할 라디오를 찾도록 JQuery에 지시합니다. val 함수는 1 요소 배열을 가져와 값이 일치하는 라디오를 찾고 checked = true로 설정합니다. 이름이 같은 다른 사람은 선택이 취소됩니다. 일치하는 값을 가진 라디오가 없으면 모두 선택이 취소됩니다. 이름과 값이 같은 라디오가 여러 개 있으면 마지막 라디오가 선택되고 다른 라디오는 선택 해제됩니다.

라디오에 값 속성을 사용하지 않는 경우 고유 ID를 사용하여 그룹에서 특정 라디오를 선택해야합니다. 이 경우 prop 함수를 사용하여 "checked"속성을 설정해야합니다. 많은 사람들이 확인란과 함께 value 속성을 사용하지 않기 때문에 # 2는 확인란과 라디오에 더 적합합니다. 또한 확인란의 이름이 같은 확인란은 그룹을 형성하지 않으므로 확인란을 선택할 수 있습니다 $("[name=myCheckBox").prop("checked", true);.

여기에서이 코드를 사용할 수 있습니다 : http://jsbin.com/OSULAtu/1/edit?html,output

@Amc의 답변이 마음에 들었습니다. filter () 호출을 사용하지 않기 위해 표현식을 더 압축 할 수 있다는 것을 알았습니다 (@chaiko는 분명히 이것을 알았습니다). 또한 prop ()는 jQuery v1.6 +의 경우 attr ()과 비교하는 방법 입니다. 주제에 대한 공식 우수 사례는 prop () 의 jQuery 문서를 참조하십시오 .

@Paolo Bergantino의 답변과 동일한 입력 태그를 고려하십시오.

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

업데이트 된 one-liner는 다음과 같이 읽을 수 있습니다.

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

나는 당신이 그 이름이 독특하고 그룹의 모든 라디오가 같은 이름을 가지고 있다고 가정 할 수 있다고 생각합니다. 그런 다음 jQuery 지원을 다음과 같이 사용할 수 있습니다.

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

참고 : 배열 전달이 중요합니다.

조건부 버전 :

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

당신이 정말로 역동적이기를 원하고 들어오는 데이터에 해당하는 라디오를 선택한다면, 이것은 작동합니다. 전달 된 데이터의 성별 값을 사용하거나 기본값을 사용합니다.

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

기본 JS 솔루션 :

 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

그리고 모델에서 값을 전달하고 값을 기반으로로드 할 때 그룹에서 라디오 버튼을 선택하려면 다음을 사용하십시오.

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()예상대로 라디오 입력의 확인 된 값을 반환하지 않습니다. 첫 번째 라디오 버튼의 값을 반환합니다.

De esta forma Jquery obtiene solo el elemento checked

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

// 자바 스크립트 나 백본과 같은 프레임 워크에서이 작업을 수행하는 경우 이와 같은 상황이 발생할 수 있습니다.

$MobileRadio = $( '#mobileUrlRadio' );

동안

$MobileRadio.checked = true;

작동 안 할 것이다,

$MobileRadio[0].checked = true;

의지.

위의 다른 사람들도 추천자가 될 수 있습니다.

여러 라디오 버튼에서 작동

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