jQuery에서 라디오 버튼을 확인하는 방법

jQuery에서 라디오 버튼을 확인하는 방법

jQuery로 라디오 버튼을 체크하려고 합니다.제 코드는 다음과 같습니다.

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

JavaScript:

jQuery("#radio_1").attr('checked', true);

동작하지 않음:

jQuery("input[value='1']").attr('checked', true);

동작하지 않음:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

동작하지 않음:

다른 생각 있어요?제가 무엇을 빠뜨리고 있나요?

jQuery 버전이 (>=) 1.6 이상인 경우 다음을 사용합니다.

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

(<) 1.6 이전 버전의 경우 다음을 사용합니다.

$("#radio_1").attr('checked', 'checked');

힌트: 전화하실 수도 있습니다.click()또는change()나중에 라디오 버튼을 눌러주세요.상세한 것에 대하여는, 코멘트를 참조해 주세요.

이거 먹어봐.

이 예에서는 입력 이름과 값을 대상으로 하고 있습니다.

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

주의사항: 여러 단어 값의 경우 아포스트로피 때문에 동작합니다.

짧고 읽기 쉬운 옵션:

$("#radio_1").is(":checked")

true 또는 false를 반환하므로 "if" 문에서 사용할 수 있습니다.

jQuery 1.6에 추가된 함수 prop()이 하나 더 있습니다.

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

이거 먹어봐.

값을 사용하여 라디오 버튼을 확인하려면 이 옵션을 사용합니다.

$('input[name=type][value=2]').attr('checked', true); 

또는

$('input[name=type][value=2]').attr('checked', 'checked');

또는

$('input[name=type][value=2]').prop('checked', 'checked');

ID를 사용하여 라디오 버튼을 체크하려면 이 명령을 사용합니다.

$('#radio_1').attr('checked','checked');

또는

$('#radio_1').prop('checked','checked');

prop() mehtod 사용

소스 링크

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

그$.prop방법이 더 낫습니다.

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

다음과 같이 테스트할 수 있습니다.

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

시험:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

놀랍게도, 가장 인기 있고 받아들여지는 답변은 댓글에도 불구하고 적절한 이벤트를 트리거하는 것을 무시합니다.반드시 기동해 주세요. .change()그렇지 않으면 모든 "변경 시" 바인딩이 이 이벤트를 무시합니다.

$("#radio_1").prop("checked", true).change();

해야 돼

jQuery("#radio_1").attr('checked', 'checked');

이게 HTML 속성입니다.

이거 드셔보세요

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

if 속성name안 통한다는 걸 잊지 마id아직 존재합니다.이 답변은 타겟팅이 필요한 사람들을 위한 것입니다.id여기 있습니다.

$('input[id=element_id][value=element_value]').prop("checked",true);

왜냐하면 재산name안 먹혀요.주위를 둘러싸지 않도록 주의하세요.id그리고.name이중/단일 따옴표로 표시.

건배!

우리는 그것이 '아저씨'라는 것을 말하고 싶어해야 한다.radio버튼을 클릭합니다.그러니 다음 코드로 시도해 보세요.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

네, 제게는 다음과 같은 방식으로 작동했습니다.

$("#radio_1").attr('checked', 'checked');

예를 들어 시험해 보세요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

이 답변은 Paul LeBeau의 댓글 덕분이다.의외로 정답이 없어서 적어야겠다고 생각했어요.

유일하게 나에게 효과가 있었던 것(jQuery 1.12.4, Chrome 86)은 다음과 같습니다.

$(".js-my-radio-button").trigger("click");

이 조작은, 선택한 라디오 버튼(시각적으로나 프로그램적으로나)을 변경해, 다음과 같은 이벤트를 트리거 합니다.change를 누릅니다.

다른 답변과 같이 "체크된" 속성을 설정해도 선택한 라디오 버튼은 변경되지 않습니다.

$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

가치 가져오기:

$("[name='type'][checked]").attr("value");

값 설정:

$(this).attr({"checked":true}).prop({"checked":true});

라디오 버튼 [Add attr]체크박스를 켜겠습니다

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

jQuery UI를 사용하는 동안 이 작업을 수행하려는 사용자가 있을 경우 업데이트된 값을 반영하기 위해 UI 확인란 개체도 새로 고쳐야 합니다.

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

다음 코드를 사용합니다.

영어가 아쉽습니다.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

이거 드셔보세요

var isChecked = $("#radio_1")[0].checked;

비슷한 문제가 있습니다. 간단한 해결 방법은 다음과 같습니다.

.click()

호출 후 무선을 새로 고치면 다른 해결 방법이 작동합니다.

function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

개선해야 할 몇 가지 관련 예가 있는데, 예를 들어 Pavers와 Paving Slabs를 제외한 Project Status 값을 클릭한 후 색상표를 숨기려면 어떻게 해야 할까요?

예를 다음에 나타냅니다.

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/

attr에는 2개의 스트링을 사용할 수 있습니다.

올바른 방법은 다음과 같습니다.

jQuery("#radio_1").attr('checked', 'true');

또한 요소가 선택되어 있는지 여부를 확인할 수 있습니다.

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

선택되지 않은 요소를 확인할 수 있습니다.

$('.myCheckbox').attr('checked',true) //Standards way

다음과 같은 방법으로 선택을 취소할 수도 있습니다.

$('.myCheckbox').removeAttr('checked')

라디오 버튼을 확인할 수 있습니다.

jQuery 버전이 (>=) 1.6 이상인 경우 다음을 사용합니다.

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

(<) 1.6 이전 버전의 경우 다음을 사용합니다.

$("#radio_1").attr('checked', 'checked');

jquery-1.11.3.js를 사용했습니다.

기본 활성화 및 비활성화

힌트 1: (옵션 버튼 타입의 공통 비활성화 및 활성화)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

힌트 2: (prop() 또는 attr()을 사용한ID 셀렉터)

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

힌트 3: (prop() 또는 arrt()를 사용한 클래스 셀렉터)

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

기타 힌트

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.displaces를 표시합니다.

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

이거 먹어봐

 $("input:checked", "#radioButton").val()

체크박스를 켜면 반환됩니다.True하지 않으면 반환됩니다.False

jQuery v1.10.1

위의 솔루션이 작동하지 않을 수 있습니다.다음으로 시도해 주세요.

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

다른 방법은 다음과 같습니다.

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

언급URL : https://stackoverflow.com/questions/5665915/how-to-check-a-radio-button-with-jquery