선택한 라디오 버튼의 값을 얻는 방법?

선택한 라디오 버튼의 값을 얻는 방법?

---

JS 프로그램에 이상한 문제가 있습니다. 나는 이것이 제대로 작동했지만 어떤 이유로 더 이상 작동하지 않습니다. 라디오 버튼 (선택한 것)의 값을 찾아 변수로 반환하고 싶습니다. 어떤 이유로 그것은 계속 돌아옵니다 undefined.

내 코드는 다음과 같습니다.

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML :

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

---

자바 스크립트 :

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
  alert(radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

http://jsfiddle.net/Xxxd3/610/

편집 : 편집 제안에 대해 HATCHA와 jpsetung에게 감사드립니다.

---

이것은 모든 탐색기에서 작동합니다.

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

모든 입력 유형의 값을 얻는 가장 순수한 방법입니다. 또한 jQuery 경로를 포함 하지 않아도됩니다.

---

document.forms.your-form-name.elements.radio-button-name.value

---

jQuery 1.8부터 쿼리의 올바른 구문은 다음과 같습니다.

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

$('input[@name="genderS"]:checked').val();더 이상은 아니지만 jQuery 1.7에서 작동했습니다 ( @ 사용 ).

---

가장 간단한 해결책 :

 document.querySelector('input[name=genderS]:checked').value

---

ECMAScript 6 버전

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

---

이 시도

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

여기에 바이올린 .

---

편집 : Chips_100에 따르면 다음을 사용해야합니다.

var sizes = document.theForm[field];

테스트 변수를 사용하지 않고 직접.

---

오래된 답변 :

당신 eval은 이것을 좋아하지 않습니까?

var sizes = eval(test);

나는 그것이 어떻게 작동하는지 모르지만, 당신은 단지 문자열을 복사하고 있습니다.

---

누군가가 답을 찾고 나처럼 여기에 도착한 경우 Chrome 34 및 Firefox 33에서 다음을 수행 할 수 있습니다.

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

또는 더 간단한 :

alert(document.theForm.genderS.value);

굴절 : https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

---

 document.querySelector('input[name=genderS]:checked').value

---

이것은 @Fontas의 답변을 기반으로 한 순수한 JavaScript이지만 TypeError선택된 라디오 버튼이 없으면 빈 문자열을 반환하고을 피하는 안전 코드가 있습니다 .

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

코드는 다음과 같이 분류됩니다.

• 1 행 : (a)는 <input>유형이고 (b)는 name속성을 genderS가지며 (c)는 검사 된 컨트롤에 대한 참조를 얻습니다 .
• 2 행 : 그러한 컨트롤이 있으면 해당 값을 반환하십시오. 없는 경우 빈 문자열을 반환하십시오. genderSRadio변수는 truthy입니다 1 호선 발견 제어 및 널 (null) / falsey 그렇지 않은 경우 경우.

JQuery의 경우 @jbabey의 답변을 사용하고 선택한 라디오 버튼이 없으면이 반환 undefined됩니다.

---

Checked = "checked" 속성이 사용 되지 않은 라디오의 예는 다음과 같습니다.

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

데모 : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ 라디오를 선택하지 않고 찾기 클릭 ]

출처 : http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

---

순수한 자바 스크립트를 사용하면 이벤트를 전달한 객체에 대한 참조를 처리 할 수 ​​있습니다.

function (event) {
    console.log(event.target.value);
}

---

각각 다른 속성 이름 ( 'option1', 'option2'등)을 갖지만 동일한 클래스 이름을 가진 양식에 다른 행의 라디오 버튼을 배치해야한다고 가정합니다. 아마도 질문과 관련된 1-5의 척도를 기준으로 각각 값을 제출하는 여러 행으로 구성해야 할 수도 있습니다. 다음과 같이 자바 스크립트를 작성할 수 있습니다.

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

또한 최종 출력을 숨겨진 양식 요소에 삽입하여 양식과 함께 제출합니다.

---

양식 element ()에 ID를 할당 할 수있는 경우이 방법을 안전한 대안 방법으로 간주 할 수 있습니다 (특히 라디오 그룹 요소 이름이 문서에서 고유하지 않은 경우).

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML :

<form action="#n" name="theForm" id="yourFormId">

---

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

그런 다음 그냥 사용하십시오

  $("#rdbExamples:checked").val()

또는

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

---

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

참고 URL : https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value