선택한 라디오 버튼의 값을 가져오려면 어떻게 해야 합니까?

선택한 라디오 버튼의 값을 가져오려면 어떻게 해야 합니까?

라디오 버튼 그룹에서 선택한 값을 가져오고 싶습니다.

HTML은 다음과 같습니다.

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

제 js는 다음과 같습니다.

var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
    rate_value = document.getElementById('r1').value;
    
}else if(rates =='Variable Rate'){
    rate_value = document.getElementById('r2').value;
    
}else if(rates =='Multi Rate'){
    rate_value = document.getElementById('r3').value;
}  

document.getElementById('results').innerHTML = rate_value;

자꾸 막막해지네요.

이 기능은 IE9 이상 및 기타 모든 브라우저에서 작동합니다.

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

var rates = document.getElementById('rates').value;

는 rates 입니다.div그래서 가치가 없어집니다. '아예'가 있는 .undefined에서 나오고 있습니다.

checked.

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

아니면

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

, 「」를 합니다.checked★★★★★★★★★★★★★★★★★★.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

가장자리에 사는 여러분들을 위해:

현재 RadioNodeList라고 불리는 것이 있으며, 그 값 속성에 액세스하면 현재 체크된 입력 값이 반환됩니다.이것에 의해, 투고된 많은 회답에서 볼 수 있듯이, 우선 「체크 끝난」입력 정보를 필터링 할 필요가 없어집니다.

샘플 폼

<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>

체크 박스를 온으로 하려면 , 다음의 조작을 실시합니다.

var form = document.getElementById("test");
alert(form.elements["test"].value);

이를 증명하는 JSFiddle:http://jsfiddle.net/vjop5xtq/

이 기능은 Firefox 33에 구현되어 있습니다(다른 모든 주요 브라우저는 이 기능을 지원하는 것 같습니다). older음음음음음음음음음음 음음음음 older older older older older 。RadioNodeList이

저를 위해 작업한 것은 아래 api에서 받은 것입니다.jquery.com 를 참조해 주세요.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

자바스크립트

var selectedOption = $("input:radio[name=option]:checked").val()

변수 selectedOption에는 선택한 라디오 버튼(즉, o1 또는 o2)의 값이 포함됩니다.

다른 옵션(외관상 오래된 옵션)은 "document.nameOf" 형식을 사용하는 것입니다.The Form.name OfInput.value;" 예: document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

폼 내의 이름을 사용하여 요소를 참조할 수 있습니다.그러나 원본 HTML에는 양식 요소가 포함되어 있지 않습니다.

여기를 클릭해 주세요(Chrome 및 Firefox에서 동작).https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

jQuery 없이 javascript를 사용하는 경우 다음 명령을 사용할 수 있습니다.

document.querySelector("input[type='radio'][name=rate]:checked").value;

문서를 사용합니다.querySelector('input[type = radio]:checked').값. 선택한 확인란의 값을 가져오려면 다른 속성을 사용하여 이름 = 성별 등의 값을 얻을 수 있습니다. 아래 스니펫을 참조하십시오.

솔루션

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

감사합니다

HTML 코드:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

JQUERY 코드:

var value= $("input:radio[name=rdoName]:checked").val();

$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

얻을 수 있을 것이다

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

Javascript에서는 당신이 올린 코드의 """getElementById()를 사용하여 값을 얻을 수 있습니다.아이디가 아닌 이름이 포함되어 있기 때문에 이렇게 수정해 주세요.

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

코드에 따라 이 rate_value를 사용합니다.

최단

[...rates.children].find(c=>c.checked).value

let v= [...rates.children].find(c=>c.checked).value

console.log(v);

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

질문한 지 1년 정도 지났지만, 상당한 개선은 가능하다고 생각했습니다.이 스크립트는 버튼이 체크되었는지 여부와 체크되어 있는 경우 그 값이 얼마인지 확인하기 때문에 가장 쉽고 다기능적인 스크립트라고 생각합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

다음과 같이 다른 함수 내에서 함수를 호출할 수도 있습니다.

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
} 

폼 요소가 다음에 의해 참조된다고 가정합니다.myForm아래 변수와 라디오 버튼은 "my-radio-button-group-name"이라는 이름을 공유합니다.다음은 순수 JavaScript와 표준에 준거하고 있습니다(다만, 어디에서나 사용할 수 있는 것은 확인하지 않았습니다).

myForm.elements.namedItem("my-radio-button-group-name").value

위의 경우 체크된(또는 선택된) 라디오 버튼 요소의 값이 표시됩니다(있는 경우).null그렇지않으면.이 솔루션의 핵심은namedItem특별히 라디오 버튼으로 작동하는 기능입니다.

HTMLFormElement.Element, HTMLFormControlsCollection.nameedItem, 특히 RadioNodeList.value 를 참조해 주세요.namedItem 보통 a를 반환한다.RadioNodeList물건.

MDN을 사용하는 이유는 MDN을 사용하면 표준 컴플라이언스를 크게 추적할 수 있고 많은 WhatWG 및 W3C 출판물보다 이해하기 쉽기 때문입니다.

라디오 버튼을 여러 번 직접 호출하면 CHECKED 버튼이 아닌 FIRST 버튼의 값이 표시됩니다.어떤 버튼이 체크되어 있는지 확인하기 위해 라디오 버튼을 루프하는 대신,onclickjavascript 함수는 나중에 자유롭게 검색할 수 있는 변수를 설정합니다.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

호출:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

또 다른 장점은 데이터 처리 및/또는 버튼 체크에 반응할 수 있다는 것입니다(이 경우 SUMBIT 버튼 활성화).

또한 요소에 대한 각 루프를 사용하여 버튼을 루프할 수 있습니다.

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

앞서 제안했던 기능에 대한 개선 사항:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

순수 Javascript에 관한 이 문제에 대한 나의 견해는 체크된 노드를 찾아 그 값을 찾아 배열에서 꺼내는 것이다.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

화살표 기능을 사용하고 있습니다.동작 예에 대해서는, 이 바이올린을 참조해 주세요.

사용할 수 있습니다..find()선택한 요소를 선택하려면:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

jQuery를 사용하는 경우:

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

다음으로 옵션버튼을 일정하게 설정하고 필요한 경우에만 선택한 값을 가져옵니다.

const rates = document.forms.rates.elements["rate"]
showRate()
function showRate(){
    document.getElementById('results').innerHTML = rates.value
}

<form id="rates" onchange="showRate()">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate 
</form>
<div id="results"></div>

<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

그러면...

var rate_value = rates.rate.value;

ID로 값 확인:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

jQuery.click 함수를 사용하여 원하는 출력을 얻었습니다.

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

도움이 됐으면 좋겠다.

var myform = new FormData(getformbywhatever); myform.get("rate");
Query Selector(쿼리 셀렉터).단, 이 CSS에.또한 입력 필드는 형식일 가능성이 높습니다.
안 했어요,해결책이 요, 요. 하다 반복해서 죄송합니다.

var rates = document.getElementById('rates').value;

대신 그런 라디오 버튼 값을 얻을 수 없습니다.

rate_value = document.getElementById('r1').value;

「 」를하고 있는 는,JQuery 버튼

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

사용법:document.querySelector('input[rate][checked]').value

https://codepen.io/anon/pen/YQxbZJ

HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

JS

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

   var rates=document.getElementsByName("rate");
            for (i = 0; i < rates.length; i++) {
            if (rates[i].checked) {
              console.log(rates[i].value);
              rate=rates[i].value;
              document.getElementById("rate").innerHTML = rate;
              alert(rate);
              
            }
          }

        <div id="rates">
          <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
          <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
          <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
        </div>
        </br>
        <div id='rate'>
        </div>

.
" "

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

에서 로 값을 .

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}

언급URL : https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button