jQuery에서 이름 속성으로 요소를 어떻게 선택합니까?

웹 페이지에 아래와 같이 3 개의 라디오 버튼이 있습니다.

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

jQuery 에서이 세 가지 중 하나를 클릭하면 선택한 라디오 버튼의 값을 얻고 싶습니다. jQuery에는 id (#) 및 class (.) 선택기가 있지만 아래와 같이 이름으로 라디오 버튼을 찾으려면 어떻게해야합니까?

$("<radiobutton name attribute>").click(function(){});

이 문제를 해결하는 방법을 알려주십시오.

이렇게해야합니다.이 모든 것은 documentation 에 있으며, 이것과 매우 유사한 예가 있습니다.

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

또한 해당 스 니펫에 여러 개의 동일한 ID가 있습니다. 유효하지 않은 HTML입니다. 고유해야하므로 클래스를 사용하여 ID가 ​​아닌 요소 세트를 그룹화하십시오.

어떤 라디오 버튼이 점검되었는지 확인하려면 다음을 시도하십시오.

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

이벤트는 그룹의 모든 라디오 버튼에 대해 잡히고 선택한 버튼의 값은 val에 배치됩니다.

업데이트 : 게시 한 후 위의 Paolo의 답변이 DOM 순회를 덜 사용하므로 더 나은 것으로 결정했습니다. 이 답변은 브라우저 간 호환되는 방식으로 선택한 요소를 얻는 방법을 보여주기 때문에이 답변을 드리겠습니다.

$('input:radio[name=theme]:checked').val();

또 다른 방법

$('input:radio[name=theme]').filter(":checked").val()

이것은 나를 위해 잘 작동합니다. 예를 들어, 동일한 "이름"을 가진 두 개의 라디오 버튼이 있으며, 체크 된 것의 값을 얻으려고합니다. 당신은 이것을 시도 할 수 있습니다.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

다음 코드는 선택된 라디오 버튼 값을 이름으로 가져 오는 데 사용됩니다

jQuery("input:radio[name=theme]:checked").val();

감사합니다 Adnan

jQuery 1.7.2에서 1.8.2로 업그레이드 한 후 오류를 연구 하면서이 질문을 발견했습니다. jQuery 1.8 이상 에서이 질문에 대한 답변이 변경되어 답변이 추가되었습니다.

jQuery 1.8에서는 : radio, : checkbox, : text와 같은 의사 선택기 가 더 이상 사용되지 않습니다 .

지금 바로 교체 위의 작업을 수행하려면 :radio함께 [type=radio].

따라서 귀하의 답변은 이제 모든 버전의 jQuery 1.8 이상에 적용됩니다.

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

1.8 readme 의 변경 사항 및 이 변경 사항에 대한 티켓을 읽을 수있을 뿐만 아니라 추가 정보 섹션 의 : radio 선택기 페이지 에서 이유를 이해할 수 있습니다.

정말 간단한 일을하기 위해 라이브러리를 포함하고 싶지 않은 사람은 :

document.querySelector('[name="theme"]:checked').value;

jsfiddle

현재 답변의 성능 개요는 여기를 확인하십시오.

클릭 이벤트 전에 선택된 기본 라디오 버튼의 값을 알고 싶다면 다음을 시도하십시오.

alert ($ ( "input : radio : checked"). val ());

아래와 같이 페이지에 둘 이상의 라디오 그룹이있는 경우 필터 기능을 사용할 수 있습니다

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

여기는 바이올린 URL입니다

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

true / false 값을 원하면 다음을 사용하십시오.

  $("input:radio[name=theme]").is(":checked")

이 같은 것?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

라디오 버튼을 클릭하면 결국 선택된 것으로 간주되므로 선택한 라디오 버튼이 호출됩니다.

같은 페이지에 둘 이상의 라디오 버튼 그룹이 있으며 라디오 버튼의 값을 얻기 위해 이것을 시도 할 수도 있습니다.

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

건배!

CSS 클래스를 사용하여 라디오 버튼의 범위를 정의한 후 다음을 사용하여 값을 결정할 수 있습니다.

$('.radio_check:checked').val()

이것은 나를 위해 일했다 ..

HTML :

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

jquery :

    $ ( ". radioClass"). each (function () {
        if ($ (this) .is ( ': checked')))
        alert ($ (this) .val ());
    });

도움이 되길 바랍니다 ..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

클래스 선택기를 사용하여 ASP.NET RadioButton컨트롤의 것이 항상 비어있는 이유를 알 수 있습니다.

아래와 같이 RadioButton컨트롤을 만듭니다 ASP.NET.

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

그리고 ASP.NET다음 HTML을 렌더링합니다.RadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

들어 ASP.NET우리가 사용하고 싶지 않은 RadioButton그들은 사용자의 손에서 어떤 이유로 변경할 수 있기 때문에 컨트롤 이름이나 ID를 (컨테이너 이름, 양식 이름, UserControl을 이름 변경, ...) 당신은 위의 코드에서 볼 수있다.

RadioButtonusing jQuery 의 가치를 얻는 유일하게 가능한 방법 은 다음과 같이 전혀 관련이없는 질문에 대한 이 답변 에서 언급 한 CSS 클래스를 사용 하는 것입니다.

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});