JQuery에서 라디오 버튼이 선택되어 있는지 확인하십시오.


584

라디오 버튼을 잘 확인하도록 설정할 수 있지만 원하는 것은 특정 라디오 버튼을 확인할 때 활성화되는 일종의 '청취자'를 설정하는 것입니다.

예를 들어 다음 코드를 보자.

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

그것은 확인 된 속성을 추가하고 모두 잘되지만 경고를 추가하는 방법은 무엇입니까? 예를 들어 클릭 기능을 사용하지 않고 라디오 버튼을 확인하면 팝업이 나타 납니까?



1
관련 Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/…
Adrien Be

답변:


1082
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

빙고! 고마워 데이빗. 경고를 표시하려면 작업을 호출해야합니까 (예 : 등)? 클릭하지 않고이 작업을 수행 할 수 있습니까?
Keith Donegan

3
이것은 "클릭 기능의 도움없이"해결되지 않습니까?
Znarkus

5
@Znarkus : OP가 만족스러워 보입니다. 당신의 당신의 자신의 사용이 있음을 주장 ('#radio_button').click하지 않고있다 click?
David Hedlund

3
@David 두 번째 줄은 if ($('#radio_button').is(':checked'))) { alert("it's checked"); }jQuery $ 기호를 잊어 버린 다음 더 괄호로 묶어야합니다.
zuallauz

2
@zua : 당신이 맞아요! 심지어 구문 오류, 예전 방식 (일치하지 않은 대괄호)이있었습니다. 고정
David Hedlund

154

동일한 이름 속성을 공유하는 라디오 버튼 그룹이 있고 제출시 또는 이러한 라디오 버튼 중 하나가 선택되어 있는지 확인하려는 이벤트가있는 경우 다음 코드로 간단히 수행 할 수 있습니다.

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

출처

jQuery API 참조


이것은 나를 위해 작동하지 않았습니다. 경고 ($ ( "input [@ name = 'shipping_method'] : checked"). val ()); 라디오 버튼을 선택하지 않아도 여전히 값을 제공합니다.
AndrewC

1
참고 : 동일한 이름을 사용하는 단일 선택 단추 그룹이있는 양식이 여러 개인 경우 제출 된 양식의 양식 만 확인해야합니다. 이를위한 한 가지 옵션은 다음과 같은 형식으로 find 메소드를 사용하는 것입니다. $('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {
Benjamin

41

Parag의 솔루션이 저에게 오류를 던졌을 때 다음은 David Hedlund와 Parag를 결합한 솔루션입니다.

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

이것은 나를 위해 잘 작동했습니다!


32

변경 이벤트는 IE에서 작동하지 않으므로 확인란의 클릭 이벤트를 바인딩해야합니다.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

이제 프로그래밍 방식으로 상태를 변경하면이 이벤트도 트리거해야합니다.

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();

18

// 수업 확인

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

// 이름 확인

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

// 데이터 확인

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}

10

또 다른 방법은 (jQuery> = 1.6) 사용하는 것입니다 .prop

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});

실제로 .prop()훨씬 빠르고 간단하게 입력 할 수 있습니다.
Marc.2377

10

특정 라디오 버튼을 체크하면 '리스너'만 있으면되기 때문에 해결책은 간단합니다. 해 :-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}

6

클릭 기능을 원하지 않으면 Jquery 변경 기능을 사용하십시오.

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

이것은 당신이 찾고있는 대답이어야합니다. 1.9.1 이상의 Jquery 버전을 사용하는 경우 라이브 기능이 더 이상 사용되지 않으므로 on을 사용하십시오.


6

... 고마워 ... 내가 필요한 것은 세트의 각 라디오 버튼이 다른 ID를 가진 체크 라디오 버튼의 '값'뿐이었습니다 ...

 var user_cat = $("input[name='user_cat']:checked").val();

나를 위해 작동합니다 ...


가장 유용한 답변
amal50


3

동적 생성 라디오 버튼 라디오 값 가져 오기

$("input:radio[name=radiobuttonname:checked").val();

동적 라디오 버튼 변경시

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});

3

$ ( '. radio-button-class-name'). is ( 'checked')는 저에게 효과적이지 않지만 다음 코드는 잘 작동했습니다.

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }

1
ID 대신 클래스와 함께 사용했기 때문에 요소 대신 노드 목록을 반환했을 것입니다. $('.radio-button-class-name').first().is(':checked')일 했어야했다.
Levi Johansen



0

jQuery는 여전히 인기가 있지만 종속성을 원하지 않으면 아래를 참조하십시오. ES-2015에서 라디오 버튼이 선택되어 있는지 확인하는 짧고 명확한 기능 :

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );
<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>


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

1.6 이전의 jQuery 버전의 경우 다음을 사용하십시오.

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

2
설정 의 값 checked대신 쿼리의 재산입니다.
Marc.2377
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.