[javascript] 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 선택기 페이지 에서 이유를 이해할 수 있습니다.