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

JAVASCRIPT / 글쓴이

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

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

스 니펫 확장

감사합니다