jQuery를 통해 어떤 라디오 버튼이 선택되었는지 어떻게 알 수 있습니까?

질문자 :juan

두 개의 라디오 버튼이 있고 선택한 버튼의 값을 게시하고 싶습니다. jQuery로 어떻게 가치를 얻을 수 있습니까?

다음과 같이 모두 얻을 수 있습니다.

 $("form :radio")

어느 것이 선택되었는지 어떻게 알 수 있습니까?

ID가 myForm 양식에서 선택한 radioName 항목의 값을 가져오려면 다음을 수행하십시오.

 $('input[name=radioName]:checked', '#myForm').val()

다음은 예입니다.

 $('#myForm input').on('change', function() { alert($('input[name=radioName]:checked', '#myForm').val()); });

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

Peter J

이것을 사용..

 $("#myform input[type='radio']:checked").val();

Joberror

라디오 버튼 그룹에 대한 참조가 이미 있는 경우 예를 들면 다음과 같습니다.

 var myRadio = $("input[name=myRadio]");

find() filter() 함수를 사용하십시오. ( find() 는 자식/하위 요소를 찾기 위한 반면 filter() 는 선택 항목에서 최상위 요소를 검색합니다.)

 var checkedValue = myRadio.filter(":checked").val();

---

참고: find() 사용을 권장하는 다른 답변을 수정한 것이었고 이후 변경된 것으로 보입니다. find() 는 컨테이너 요소에 대한 참조가 이미 있지만 라디오 버튼에 대한 참조가 없는 상황에서 여전히 유용할 수 있습니다. 예:

 var form = $("#mainForm"); ... var checkedValue = form.find("input[name=myRadio]:checked").val();

Matt Browne

이것은 작동해야 합니다:

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

Peter J의 솔루션처럼 ''가 아니라 input:checked 주위에 사용된 ""에 유의하십시오.

Cam Tullos

라디오 선택기와 함께 :checked 선택기를 사용할 수 있습니다.

 $("form:radio:checked").val();

tvanfosson

부울 값만 원하는 경우, 즉 확인되었는지 여부는 다음을 시도하십시오.

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

Juan

모든 라디오 가져오기:

 var radios = jQuery("input[type='radio']");

필터를 사용하여 확인된 항목 가져오기

 radios.filter(":checked")

Alex V

또 다른 옵션은 다음과 같습니다.

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

RedDragon

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

Phillip Senn

제 경우에는 하나의 양식에 두 개의 라디오 버튼이 있고 각 버튼의 상태를 알고 싶었습니다. 아래는 나를 위해 일했습니다.

 // get radio buttons value console.log( "radio1: " + $('input[id=radio1]:checked', '#toggle-form').val() ); console.log( "radio2: " + $('input[id=radio2]:checked', '#toggle-form').val() );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="toggle-form"> <div id="radio"> <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label> <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label> </div> </form>

rmbianchi

다음은 양식을 작성하고 확인된 라디오 수신을 처리하는 방법입니다.

myForm이라는 양식 사용:

 <form id='myForm'> <input type='radio' name='radio1' class='radio1' value='val1' /> <input type='radio' name='radio1' class='radio1' value='val2' /> ... </form>

다음 형식에서 값을 가져옵니다.

 $('#myForm .radio1:checked').val();

양식을 게시하지 않는 경우 다음을 사용하여 더 단순화합니다.

 <input type='radio' class='radio1' value='val1' /> <input type='radio' class='radio1' value='val2' />

그런 다음 확인 된 값을 얻는 것은 다음과 같습니다.

 $('.radio1:checked').val();

입력에 클래스 이름이 있으면 입력 스타일을 쉽게 지정할 수 있습니다...

Darin Peterson

JSF 생성 라디오 버튼( <h:selectOneRadio> 태그 사용)에서 다음을 수행할 수 있습니다.

 radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

여기서 selectOneRadio ID는 radiobutton_id 이고 양식 ID는 form_id 입니다.

jQuery가 이 속성을 사용하기 때문에 표시된 대로 id 대신 name 을 사용해야 합니다(이름 은 제어 ID와 유사한 JSF에 의해 자동으로 생성됨).

Francisco Alvarado

또한 사용자가 아무 것도 선택하지 않았는지 확인합니다.

 var radioanswer = 'none'; if ($('input[name=myRadio]:checked').val() != null) { radioanswer = $('input[name=myRadio]:checked').val(); }

Mark

단일 양식에 여러 라디오 버튼이 있는 경우

 var myRadio1 = $('input[name=radioButtonName1]'); var value1 = myRadio1.filter(':checked').val(); var myRadio2 = $('input[name=radioButtonName2]'); var value2 = myRadio2.filter(':checked').val();

이것은 나를 위해 일하고 있습니다.

Ramesh

라디오 버튼 값을 설정하고 가져오기 위한 jQuery 플러그인을 작성했습니다. 그것은 또한 그들에 대한 "변경" 이벤트를 존중합니다.

 (function ($) { function changeRadioButton(element, value) { var name = $(element).attr("name"); $("[type=radio][name=" + name + "]:checked").removeAttr("checked"); $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked"); $("[type=radio][name=" + name + "]:checked").change(); } function getRadioButton(element) { var name = $(element).attr("name"); return $("[type=radio][name=" + name + "]:checked").attr("value"); } var originalVal = $.fn.val; $.fn.val = function(value) { //is it a radio button? treat it differently. if($(this).is("[type=radio]")) { if (typeof value != 'undefined') { //setter changeRadioButton(this, value); return $(this); } else { //getter return getRadioButton(this); } } else { //it wasn't a radio button - let's call the default val function. if (typeof value != 'undefined') { return originalVal.call(this, value); } else { return originalVal.call(this); } } }; })(jQuery);

추가 기능을 활성화하려면 아무 곳에나 코드를 넣습니다. 그럼 즐기세요! 아무 것도 중단하지 않고 기본 val 함수를 재정의합니다.

이 jsFiddle을 방문하여 실제로 사용해보고 어떻게 작동하는지 확인할 수 있습니다.

깡깡이

Mathias Lykkegaard Lorenzen

 $(".Stat").click(function () { var rdbVal1 = $("input[name$=S]:checked").val(); }

Swadesh Bhattacharya

이것은 잘 작동합니다

 $('input[type="radio"][class="className"]:checked').val()

작업 데모

:checked 선택기는 checkboxes , radio buttons 및 선택 요소에서 작동합니다. 선택 요소의 경우에만 :selected 선택기를 사용하십시오.

API :checked Selector

Manoj

클래스를 사용하는 선택된 라디오의 값을 얻으려면:

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

Rodrigo Dias

나는 이 간단한 스크립트를 사용한다

 $('input[name="myRadio"]').on('change', function() { var radioValue = $('input[name="myRadio"]:checked').val(); alert(radioValue); });

Lafif Astahdziq

이것을 사용하십시오:

 value = $('input[name=button-name]:checked').val();

jeswin

데모 : https://jsfiddle.net/ipsjolly/xygr065w/

 $(function(){ $("#submit").click(function(){ alert($('input:radio:checked').val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Sales Promotion</td> <td><input type="radio" name="q12_3" value="1">1</td> <td><input type="radio" name="q12_3" value="2">2</td> <td><input type="radio" name="q12_3" value="3">3</td> <td><input type="radio" name="q12_3" value="4">4</td> <td><input type="radio" name="q12_3" value="5">5</td> </tr> </table> <button id="submit">submit</button>

Code Spy

하나의 양식에 라디오 버튼 세트가 1개만 있는 경우 jQuery 코드는 다음과 같이 간단합니다.

 $( "input:checked" ).val()

Randy Greencorn

이를 돕기 위해 라이브러리를 출시했습니다. 실제로 가능한 모든 입력 값을 가져오지만 어떤 라디오 버튼이 선택되었는지도 포함합니다. https://github.com/mazondo/formalizedata 에서 확인할 수 있습니다.

답변의 js 객체를 제공하므로 다음과 같은 형식이 됩니다.

 <form> <input type="radio" name"favorite-color" value="blue" checked> Blue <input type="radio" name="favorite-color" value="red"> Red </form>

당신에게 줄 것입니다:

 $("form").formalizeData() { "favorite-color" : "blue" }

Ryan

JQuery는 양식의 모든 라디오 버튼과 확인된 값을 가져옵니다.

 $.each($("input[type='radio']").filter(":checked"), function () { console.log("Name:" + this.name); console.log("Value:" + $(this).val()); });

Iyyappan Amirthalingam

JavaScript 배열의 모든 라디오 버튼 값을 검색하려면 다음 jQuery 코드를 사용하십시오.

 var values = jQuery('input:checkbox:checked.group1').map(function () { return this.value; }).get();

Nilesh

시도 해봐-

 var radioVal = $("#myform").find("input[type='radio']:checked").val(); console.log(radioVal);

Gautam Rai

그것을 얻는 또 다른 방법:

 $("#myForm input[type=radio]").on("change",function(){ if(this.checked) { alert(this.value); } });

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

Mehdi Bouzidi

$(function () { // Someone has clicked one of the radio buttons var myform= 'form.myform'; $(myform).click(function () { var radValue= ""; $(this).find('input[type=radio]:checked').each(function () { radValue= $(this).val(); }); }) });

JoshYates1980

노력하다

 myForm.myOption.value 

 function check() { console.log( myForm.myOption.value ); }

 <form id="myForm"> <input type="radio" name="myOption" value="1"> 1 <br> <input type="radio" name="myOption" value="2"> 2 <br> <input type="radio" name="myOption" value="3"> 3 <br> </form> <button onclick="check()">check</button>

Kamil Kiełczewski

이걸로 해봐. 그것은 나를 위해 일했다

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

salman ifrahim

출처 : http:www.stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery