선택한 라디오 버튼의 가치를 얻는 방법?

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

내 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;

나는 계속 정의되지 않고있다.

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

rates 요소는 div값이므로 값이 없습니다. 이것은 아마도 어디에서 undefined왔는지입니다.

checked속성은 요소의 선택 여부를 알려줍니다 :

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

이것은 IE9 이상 및 다른 모든 브라우저에서 작동합니다.

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

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 라는 것이 있습니다 value 속성에 액세스하면 현재 확인 된 입력 값을 반환합니다. 이렇게하면 게시 된 많은 답변에서 볼 수 있듯이 '확인 된'입력을 먼저 필터링하지 않아도됩니다.

예제 양식

<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에서 구현되었습니다. 다른 모든 주요 브라우저는이를 지원하는 것으로 보입니다. 오래된 브라우저는 RadioNodeList제대로 작동하려면 polfyill이 필요 합니다.

나를 위해 일한 것은 아래 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.nameOfTheForm.nameOfTheInput.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에는 양식 요소가 없습니다.

Fiddle here (Chrome 및 Firefox에서 작동) : https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

사용 document.querySelector ( '입력 [TYPE = 라디오] 체크 ") 값,. 선택한 확인란의 값을 얻으려면 다른 속성을 사용하여 이름 = 성별 등의 값을 얻을 수 있습니다. 스 니펫 아래를 통해 분명히 도움이됩니다.

해결책

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"/>

쿼리 코드 :

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()위의 코드에서 ID " "를 사용하여 값을 얻을 수 있습니다. 게시 한 코드에는 ID가 아닌 이름이 있으므로 다음과 같이 수정하십시오.

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

코드에 따라이 rate_value를 사용하십시오.

질문을 한 지 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

상기는 a의 값을 산출 할 것이다 체크 가있는 경우, 또는, (혹은 또한 불리는, 선택) 라디오 버튼 소자 null그렇지. 솔루션의 핵심은 namedItem라디오 버튼과 함께 작동 하는 기능입니다.

참조 HTMLFormElement.elements , HTMLFormControlsCollection.namedItem 특히 RadioNodeList.value을 로, namedItem 일반적으로 반환 RadioNodeList개체를.

MDN은 적어도 표준 준수를 추적 할 수 있고 많은 WhatWG 및 W3C 간행물보다 이해하기 쉽기 때문에 MDN을 사용합니다.

라디오 버튼을 여러 번 직접 호출하면 CHECKED 버튼이 아니라 FIRST 버튼의 값이 표시됩니다. 어떤 버튼이 선택되어 있는지 확인하기 위해 라디오 버튼을 반복하는 대신 onclick나중에 원하는대로 검색 할 수있는 변수를 설정 하는 자바 스크립트 함수 를 호출하는 것을 선호합니다 .

<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; 
}

추가 이점은 데이터를 처리하거나 버튼 확인 (이 경우 제출 버튼 사용)에 반응 할 수 있다는 것입니다.

이전에 제안 된 기능이 개선되었습니다.

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;
}

순수한 자바 스크립트 로이 문제에 대한 나의 취지는 검사 된 노드를 찾고 그 값을 찾아 배열에서 튀어 나오는 것입니다.

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

화살표 기능을 사용하고 있습니다 . 실제 예제는 이 바이올린 을 참조하십시오 .

jQuery를 사용하는 경우 :

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

.find()확인 된 요소를 선택 하는 데 사용할 수 있습니다 .

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

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

<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");
위의 QuerySelector 양식 인 경우 더 나은 솔루션입니다. 그러나이 방법은 특히 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

요소에 forEach-loop를 사용하여 버튼을 반복 할 수도 있습니다.

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

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);`

PHP에서는 매우 쉬운
HTML 페이지입니다

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">

폼에서 PHP로 가치 활용

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