j선택한 값 가져오기 라디오 버튼 쿼리

programing

j선택한 값 가져오기 라디오 버튼 쿼리

oldcodes 2023. 6. 18. 16:18

j선택한 값 가져오기 라디오 버튼 쿼리

문제 설명은 간단합니다.사용자가 라디오 그룹에서 라디오 단추를 선택했는지 확인해야 합니다.그룹의 모든 라디오 버튼은 동일한 ID를 공유합니다.

문제는 양식이 어떻게 생성되는지 제가 제어할 수 없다는 것입니다.다음은 라디오 버튼 제어 코드의 모양에 대한 샘플 코드는 다음과 같습니다.

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

이 외에도 라디오 버튼을 선택하면 "체크된" 특성이 체크된 텍스트만 컨트롤에 추가되지 않습니다(값 없이 속성만 체크된 것 같습니다).다음은 선택한 라디오 컨트롤의 모양입니다.

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

확인된 라디오 버튼의 값을 얻는 데 도움이 되는 jQuery 코드를 도와줄 수 있는 사람이 있습니까?

그냥 사용하세요.

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

그것은 매우 쉽습니다.

첫째, ID가 동일한 요소를 여러 개 가질 수 없습니다.양식이 어떻게 만들어지는지 통제할 수 없다고 하셨겠지만...어떻게든 라디오에서 모든 ID를 제거하거나 고유하게 만드려고 합니다.

선택한 라디오 버튼의 값을 가져오려면 다음과 같이 이름으로 선택합니다.:checked필터를 씌우기

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

편집

그래서 당신은 그 이름들을 통제할 수 없습니다.그렇다면 이 라디오 버튼들을 전부 디브 안에 넣어두라고 할 수 있겠네요.radioDiv그런 다음 선택기를 약간 수정합니다.

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

선택한 라디오 버튼의 값을 가져오는 가장 간단한 방법은 다음과 같습니다.

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

셀렉터 사이에 공백을 사용해서는 안 됩니다.

$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

DOM 준비 기능으로 포장해야 합니다($(function(){...});또는$(document).ready(function(){...});).

<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

선택한 라디오 버튼 값이 반환됩니다.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

내 블로그에 더 자세한 정보: https://webexplorar.com/jquery-get-selected-radio-button-value/

코드에서 jQuery는 이름이 q12_3인 입력의 첫 번째 인스턴스(이 경우 값이 1)만 찾습니다.이름이 q12_3인 입력을 원하는데, 이는:checked.

$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});

위의 코드는 다음을 사용하는 것과 같지 않습니다..is(":checked")jQuery'sis()function은 요소가 아닌 부울(참 또는 거짓)을 반환합니다.

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

중첩 특성의 경우

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

이름에 대한 단일 교정기를 잊지 마십시오.

이 코드는 작동합니다.

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

모든 라디오 가져오기:

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

선택한 항목을 가져오도록 필터링

radios.filter(":checked");

라디오 버튼 값을 찾을 수 있는 다른 방법

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

선택한 라디오 단추의 값을 가져오려면 라디오 단추 이름과 라디오 단추가 들어 있는 양식 ID를 사용합니다.

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

OR만

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

정상적으로 작동하는 예를 확인합니다.

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

아래 코드 사용

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

결과에 "남성" 또는 "여성"이 표시되도록 값 특성을 정의해야 합니다.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

서로 다른 섹션과 연결된 무선 그룹 모음을 사용한 작업 예제는 아래를 참조하십시오.이름 지정 체계는 중요하지만 입력에 대해 일관된 이름 지정 체계를 사용하는 것이 좋습니다(특히 여기와 같은 섹션에 있는 경우).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}

* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

다음은 선택한 라디오 버튼의 값을 구하는 간단한 버전입니다.

var value = $(":radio:checked").val()

예를 들어 사용해 보십시오.

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



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

이름만

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

javascript/jQuery에서 선택한 라디오 버튼의 값을 ID로 얻을 수 있습니다.

$("#InvCopyRadio:checked").val();

이것이 도움이 되길 바랍니다.

저는 제가 이렇게 늦게 합류한다는 것을 알고 있습니다.하지만 그것이 필요하다는 것을 언급할 가치가 있습니다.

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

그리고 나서 저는 이것을 제 js에서 확인했습니다.이런 느낌일 수도 있습니다.

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

상위 양식을 사용하여 무선 입력 값을 찾을 수 있습니다.양식이 어떻게 생성되는지 알 수 없지만 양식에 클래스를 부여할 수 있습니다.

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

이 간단한 주제를 설명하는 가장 좋은 방법은 간단한 예와 참조 링크를 제공하는 것입니다.

다음 예제에는 두 개의 라디오 버튼이 있습니다.사용자가 라디오 버튼을 선택하면 선택한 라디오 버튼 값이 알림 상자에 표시됩니다.

HTML:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery:-

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

그리고 값 집합 / Changed to div:에 대한 경고를 위한 jquery를 처리합니다.

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

그것은 매우 쉽습니다...:-}

저는 자바스크립트를 사용하는 사람은 아니지만, 이 문제를 검색하기 위해 여기를 찾았습니다.구글에서 검색하여 여기서 찾는 사람들에게, 저는 이것이 도움이 되기를 바랍니다.따라서 문제의 경우와 같이 라디오 버튼 목록이 있습니다.

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

이 선택기로 선택한 항목을 찾을 수 있습니다.

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

선택한 요소가 없더라도 정의되지 않은 오류가 발생하지 않습니다.따라서 요소의 값을 취하기 전에 if 문을 추가로 작성할 필요가 없습니다.

다음은 매우 기본적인 jsfiddle 예제입니다.

여기에는 rd1 및 Radio1이라는 두 개의 라디오 버튼이 있습니다.

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" />

개인을 확인하여 어떤 라디오 버튼을 선택했는지 확인하는 가장 간단한 방법은 (": 선택됨") 속성입니다.

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

이해하기 쉬운 또 다른 방법은...작동 중:

HTML 코드:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery 코드:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

다중 그룹 라디오 버튼 배열에 숨겨진 값

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

심지어.input다른 답변에서 제안한 것처럼 필요하지 않습니다.다음 코드도 사용할 수 있습니다.

var variable_name = $("[name='radio_name']:checked").val();

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

HTML 마크업:

<div class="form-group">
  <input id="rdMale" type="radio" class="clsGender" value="Male" name="rdGender" /> Male
  <input id="rdFemale" type="radio" class="clsGender" value="Female" name="rdGender" /> Female
 </div>

라디오 버튼 ID로 선택한 값 가져오기:

 $("input[name='rdGender']").click(function () {
     alert($("#rdMale").val());
});

라디오 버튼 클래스 이름으로 값 가져오기

 $(".clsGender").click(function () {
       alert($(this).val());
            //or
      alert($(".clsGender:checked").val());
   });

이름으로 값 가져오기

   $("input[name='rdGender']").click(function () {
          var rdVaule = $("input[name='rdGender']:checked").val();
          alert(rdVaule);
   });

여러 라디오 단추의 경우 라디오 단추 태그에 동일한 이름 속성을 입력해야 합니다.예를 들어,

<input type="radio" name"gender" class="select_gender" value="male">
<input type="radio" name"gender" class="select_gender" value="female">

라디오 옵션이 있으면 아래와 같은 jQuery 코드를 수행하여 선택/체크 표시된 라디오 옵션의 값을 얻을 수 있습니다.

$(document).on("change", ".select_gender", function () {
   console.log($(this).val());    // Here you will get the current selected/checked radio option value
});

참고: $(문서)는 DOM 100% 로드 후에 라디오 버튼이 생성되면 필요합니다. $(문서)를 사용하지 않으면 jQuery가 새로 생성된 라디오 버튼의 범위를 알 수 없기 때문입니다.이런 식으로 jQuery 이벤트 전화를 하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button

'programing' 카테고리의 다른 글

OpenXML을 사용하여 Excel 시트에서 탭 이름을 검색하는 방법 (0)	2023.06.18
*.so 파일에서 기능하도록 기능 주소를 매핑하는 방법 (0)	2023.06.18
Java JDBC - tnsnames.ora를 사용하여 Oracle에 연결하는 방법 (0)	2023.06.18
Intents를 사용하여 한 Android 활동에서 다른 활동으로 개체를 보내는 방법은 무엇입니까? (0)	2023.06.18
텍스트 필드에서 여러 열을 결합하는 MVC 선택 목록 (0)	2023.06.18

현재글j선택한 값 가져오기 라디오 버튼 쿼리

각종 프로그래밍 정보를 다루는 블로그입니다.

oracle, AngularJS, CSS, Wordpress, c, mysql, WPF, git, Python, PowerShell, JSON, MongoDB, Ajax, MariaDB, excel, JQuery, Android, ASP.NET, ReactJS, spring-boot,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

oldcodes

j선택한 값 가져오기 라디오 버튼 쿼리

j선택한 값 가져오기 라디오 버튼 쿼리

이해하기 쉬운 또 다른 방법은...작동 중:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

j선택한 값 가져오기 라디오 버튼 쿼리

j선택한 값 가져오기 라디오 버튼 쿼리

이해하기 쉬운 또 다른 방법은...작동 중:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바