복붙노트

[JQUERY] 어떻게 jQuery를 통해 선택되는 라디오 버튼을 알 수 있는가?

JQUERY

어떻게 jQuery를 통해 선택되는 라디오 버튼을 알 수 있는가?

해결법


  1. 1.아이디 myForm을 가진 형태의 선택 radioName 항목의 값을 얻으려면 :

    아이디 myForm을 가진 형태의 선택 radioName 항목의 값을 얻으려면 :

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

    다음은 그 예이다 :

    $ ( '# myForm을 입력'). ( '변화'의 함수 () { 경보 ($ ( '입력 [NAME = radioName] 체크'. '#myForm')를 발 ()); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <형태 ID = "myForm을"> 1
    2
    3


  2. 2.이 옵션을 사용합니다 ..

    이 옵션을 사용합니다 ..

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

  3. 3.당신은 이미 예를 들어, 라디오 버튼 그룹에 대한 참조가있는 경우 :

    당신은 이미 예를 들어, 라디오 버튼 그룹에 대한 참조가있는 경우 :

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

    못 했습 필터 () 함수를 사용하여 (). (선택에서 검색 최상위 요소) () (찾을 필터 반면, 아동 / 자손 요소를 찾기위한 것입니다.)

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

    참고 :이 답변은 원래 변경 때문에 갖고있는 것 같아요 찾기 ()를 사용하여 권장 다른 대답을 정정했다. 예컨대 라디오 버튼, 여전히 당신은 이미 컨테이너 요소에 대한 참조를 가지고 상황에 유용 할 수 있음) (찾을 수 있지만 :

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

  4. 4.이 작업을해야합니다 :

    이 작업을해야합니다 :

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

    피터 J의 솔루션처럼 ''확인하지 : ""마크가 입력 주위 usaged 주


  5. 5.라디오 선택과 함께 확인 선택 : 사용자가 사용할 수 있습니다.

    라디오 선택과 함께 확인 선택 : 사용자가 사용할 수 있습니다.

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

  6. 6.당신은 즉, 단지 부울 값을 원하는 경우 체크 또는이 시도되어 있지 않은 경우 :

    당신은 즉, 단지 부울 값을 원하는 경우 체크 또는이 시도되어 있지 않은 경우 :

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

  7. 7.모든 라디오를 얻을 :

    모든 라디오를 얻을 :

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

    필터는 하나 그게 전부가 체크 얻을 수

    radios.filter(":checked")
    

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

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

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

  9. 9.

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

  10. 10.여기에 내가 양식을 작성하고 체크 된 라디오의 점점을 처리 할 방법입니다.

    여기에 내가 양식을 작성하고 체크 된 라디오의 점점을 처리 할 방법입니다.

    형태라는 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();
    

    입력에 클래스 이름을 갖는 입력 쉽게 스타일을 나를 수 있습니다 ...


  11. 11.내 경우에는 내가 한 형태로 두 개의 라디오 버튼을 가지고 있고 각 버튼의 상태를 알고 싶어. 이 아래 나를 위해 일한 :

    내 경우에는 내가 한 형태로 두 개의 라디오 버튼을 가지고 있고 각 버튼의 상태를 알고 싶어. 이 아래 나를 위해 일한 :

    // 라디오 버튼 값을 가져 CONSOLE.LOG (: + $ ( "radio1.": "입력 [ID = radio1] 체크 '# 토글 형') 발 ()); CONSOLE.LOG (: + $ ( "radio2.": "입력 [ID = radio2] 체크 '# 토글 형') 발 ()); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <형태 ID = "토글 형"> <= "radio1"레이블> 싱글 플롯 <라벨 ="radio2 "> 모든 플롯


  12. 12.JSF 생성 라디오 버튼에서 (사용 <시간 : selectOneRadio> 태그), 당신은이 작업을 수행 할 수 있습니다 :

    JSF 생성 라디오 버튼에서 (사용 <시간 : selectOneRadio> 태그), 당신은이 작업을 수행 할 수 있습니다 :

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

    selectOneRadio ID가 radiobutton_id이고 여기서 폼 form_id ID가된다.

    jQuery를이 (이름은 컨트롤 ID를 닮은 JSF에 의해 자동으로 생성된다)이 속성을 사용하기 때문에, 바와 같이, 사용 이름 대신 아이디로해야합니다.


  13. 13.사용자가 아무것도 선택하지 않는 경우도 확인합니다.

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

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

  14. 14.당신은 하나의 형태로 여러 개의 라디오 버튼이있는 경우

    당신은 하나의 형태로 여러 개의 라디오 버튼이있는 경우

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

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


  15. 15.나는 설정 및 라디오 버튼 값을 얻기위한 jQuery 플러그인을 썼다. 또한 그들에 "변경"이벤트를 존중합니다.

    나는 설정 및 라디오 버튼 값을 얻기위한 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);
    

    추가 기능을 사용하려면 어디서든 코드를 넣습니다. 그리고 즐기세요! 그냥 아무것도 깨지 않고 기본 발 기능을 대체합니다.

    당신은 행동에 그것을 시도이 jsFiddle를 방문하여 어떻게 작동하는지 볼 수 있습니다.

    깡깡이


  16. 16.

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

  17. 17.이 작품 벌금

    이 작품 벌금

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

    작업 데모

    : 선택 선택 체크 박스, 라디오 버튼, 선택 요소에 적용됩니다. 선택 선택 : 만 선택 요소를 들어, 사용합니다.

    에 대한 API : 선택기 확인


  18. 18.클래스를 사용하여 선택한 라디오의 값을 얻으려면 :

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

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

  19. 19.나는이 간단한 스크립트를 사용하여

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

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

  20. 20.이 옵션을 사용합니다 :

    이 옵션을 사용합니다 :

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

  21. 21.DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

    DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

    () {(기능 $ $ ( "# 제출"). (함수 ()을 클릭합니다 { 경고 ($ ( '입력 : 라디오 : 선택'.) 발 ()); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <표> 판매 촉진 1 2 3 4 5 <버튼 ID = "제출"> 제출


  22. 22.당신은 단지 1 개 양식에 라디오 버튼의 1 개 세트가있는 경우 jQuery 코드는이 같은 간단하다 :

    당신은 단지 1 개 양식에 라디오 버튼의 1 개 세트가있는 경우 jQuery 코드는이 같은 간단하다 :

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

  23. 23.나는이에 도움이 라이브러리를 발표했습니다. 실제로, 모든 가능한 입력 값을 끌어 또한 확인 된 라디오 버튼을 포함한다. 당신은 https://github.com/mazondo/formalizedata 그것을 확인하실 수 있습니다

    나는이에 도움이 라이브러리를 발표했습니다. 실제로, 모든 가능한 입력 값을 끌어 또한 확인 된 라디오 버튼을 포함한다. 당신은 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"
    }
    

  24. 24.JQuery와 양식 및 체크 값의 모든 라디오 버튼을 얻을 수 있습니다.

    JQuery와 양식 및 체크 값의 모든 라디오 버튼을 얻을 수 있습니다.

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

  25. 25.jQuery 코드 다음 자바 스크립트 배열 사용중인 모든 라디오 버튼 값을 검색하려면 :

    jQuery 코드 다음 자바 스크립트 배열 사용중인 모든 라디오 버튼 값을 검색하려면 :

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

  26. 26.시도 해봐-

    시도 해봐-

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

  27. 27.또 다른 방법은 그것을 얻을 수 있습니다 :

    또 다른 방법은 그것을 얻을 수 있습니다 :

    $ ( "변경"기능에 대한 ( "# myForm을 입력 [TYPE = 라디오]"). () { 경우 {(this.checked) 경고 (this.value); } }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <형태 ID = "myForm을"> 1
    2


  28. 28.

    $(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();
        });
      })
    });
    

  29. 29.이 질문에서, 나는 당신이 각각의 라벨에 대한 클릭 이벤트 내에있을 때 현재 선택한 입력에 액세스하는 다른 방법을 함께했다. 새로 선택한 입력이 라벨의 클릭 이벤트 때까지 업데이트되지 않기 때문에 이유는 이유입니다.

    이 질문에서, 나는 당신이 각각의 라벨에 대한 클릭 이벤트 내에있을 때 현재 선택한 입력에 액세스하는 다른 방법을 함께했다. 새로 선택한 입력이 라벨의 클릭 이벤트 때까지 업데이트되지 않기 때문에 이유는 이유입니다.

    TL; DR

    $('label').click(function() {
      var selected = $('#' + $(this).attr('for')).val();
    
      ...
    });
    

    () {(기능 $ //이 크게 제대로 작동하지 않습니다 위와 같이 설명 $ ( '# 라벨을보고'). ((기능을 클릭) { VAR 쿼리 = $. ( '입력 [NAME = "필터"] : 체크') 발 (); VAR 시간 = (새 Date ()) toString ().; . $ ( '. 쿼리 [데이터 METHOD = "이벤트를 클릭"]) HTML (+ 시간'에서 '질의 +); }); //이 작동하지만 같은 레이블이 연속적으로 클릭하면 갱신에 실패 $ ( '# 입력 [NAME = "필터"]보고'). ( '변화'의 함수 () { VAR 쿼리 = $. ( '입력 [NAME = "필터"] : 체크') 발 (); VAR 시간 = (새 Date ()) toString ().; ( '. 쿼리 [데이터 METHOD = "변경 이벤트"]) $ HTML (조회 시간 + +'에서 ').; }); // 여기에 내가 생각 해낸 해결책이다 $ ( '# 라벨을보고'). ((기능을 클릭) { VAR 쿼리 = $ (() '에 대한' '#'+ $ (이) .attr) 발 ().; VAR 시간 = (새 Date ()) toString ().; $ ( '. 쿼리 [데이터 방식 = "이 함께 이벤트를 클릭"])를 HTML (+ 시간'에 '를 조회 +).; }); }); 입력 [NAME = "필터"{ 표시 : 없음; } #reported 라벨 { 배경 색상 : #ccc; 패딩 : 5px; 여백 : 5px; 경계 반경 : 5px; 커서 : 포인터; } .query { 패딩 : 5px; 여백 : 5px; } .query : 전에 { 함량 ATTR (데이터 법)에 "ON" ""; } [데이터 METHOD = "이벤트를 클릭"{ 색상 : 빨강; } [데이터 METHOD = "변경 이벤트"{ 색상 : # CC0; } [데이터 METHOD = "이것과 클릭 이벤트"{ 색상 : 녹색; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <레이블 = "질문"> 질문 <레이블 = "답"> 답변 <레이블 = "코멘트"> 댓글 <레이블 = "사용자"> 사용자 < "회사"= 레이블> 회사


  30. 30.내가 할 필요하면 프론트 엔드 자바 스크립트로 가능한 한 많이 할 것입니다 단순화 C # 코드이었다. 내가 DNN에서 일하고 있기 때문에 나는 FIELDSET 컨테이너를 사용하고 있는데 그것은 자신의 형태를 갖는다. 그래서 양식을 추가 할 수 없습니다.

    내가 할 필요하면 프론트 엔드 자바 스크립트로 가능한 한 많이 할 것입니다 단순화 C # 코드이었다. 내가 DNN에서 일하고 있기 때문에 나는 FIELDSET 컨테이너를 사용하고 있는데 그것은 자신의 형태를 갖는다. 그래서 양식을 추가 할 수 없습니다.

    내가 사용하고있는 3 중 텍스트 상자 테스트에 필요하고 있는지, 검색 유형은 무엇입니까? 값으로 시작, 값, 값의 정확한 일치를 포함합니다.

    HTML :

    <fieldset id="fsPartNum" class="form-inline">
    <div class="form-group">
        <label for="txtPartNumber">Part Number:</label>
        <input type="text" id="txtPartNumber" class="input-margin-pn" />
    </div>
    <div class="form-group">
        <label for="radPNStartsWith">Starts With: </label>
        <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
    </div>
    <div class="form-group">
        <label for="radPNContains">Contains: </label>
        <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
    </div>
    <div class="form-group">
        <label for="radPNExactMatch">Exact Match: </label>
        <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
    </div>
    

    그리고 내 자바 스크립트입니다 :

            alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
        if(txtPartNumber.val() !== ''){
            message = 'Customer Part Number';
        }
        else if(txtCommercialPartNumber.val() !== ''){
    
        }
        else if(txtDescription.val() !== ''){
    
        }
    

    그냥 ID를 가진 모든 포함 된 태그를 사용할 수 있습니다 말. DNNers,이 알고하는 것이 좋다. 최종 목표는 여기에 부품 SQL 서버에서 검색하기 시작하는 데 필요한 어떤 중간 수준의 코드 패스입니다.

    이 방법은 또한 훨씬 더 복잡 이전의 C # 코드를 복사 할 필요가 없습니다. 무거운 바로 여기 수행되고있다.

    나는 이것에 대한 비트를보고 한 후 어설프게 작업에 도착했다. 그래서 다른 DNNers에 대한 희망이 쉽게 찾을 수 있습니다.

  31. from https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery by cc-by-sa and MIT license