JavaScript를 통해 라디오 버튼 그룹의 값을 확인 하시겠습니까?

JavaScript를 통해 라디오 버튼 그룹의 값을 확인 하시겠습니까?

---

이것은 어리석은 것처럼 보일 수있는 JavaScript를 통해 HTML 양식에서 라디오 버튼 그룹의 값을 확인하는 방법을 알아낼 수없는 것입니다. 다음 코드가 있습니다.

<input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>

genderJavaScript 를 통해 의 값을 검색 비용 지불 ?

---

jQuery와 같은 자바 펼쳐 라이브러리를 사용하는 경우 매우 우수한 라이브러리.

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

이 코드는 이름이 있는 checked입력을 선택하고 . 간단하지 않습니까?gendervalue

라이브 데모

---

프레임 워크를 사용하지 않는면 document.querySelector ()를 사용하십시오 ( 거의 항상하고 싶습니다).

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

---

순수 자바 펼쳐에서 :

var genders = document.getElementsByName("gender");
var selectedGender;

for(var i = 0; i < genders.length; i++) {
   if(genders[i].checked)
       selectedGender = genders[i].value;
 }

최신 정보

루프가없는 순수 자바 스크립트에서 최신 (아직 지원되지 않을 수 있음) 사용 :RadioNodeList

var form_elements = document.getElementById('my_form').elements;
var selectedGender = form_elements['gender'].value;

유일한 문제 RadioNodeList는 속성에 입력 만 반환 HTMLFormElement.elements또는 라디오 입력이 래핑 된 양식 또는 필드에 대한 식별자가 먼저 가져옵니다.HTMLFieldSetElement.elements

---

다음을 수행하십시오.

document.getElementById("genderf").value;

라디오 버튼이 그러나 선택 되었는지 또는 선택 되었는지 확인하려면 다음을 수행하십시오 .

document.getElementById("genderf").checked;

---

name 속성을 사용하여 양식 태그에 양식 요소를 래핑하면 document.formName.radioGroupName.value를 사용하여 값을 쉽게 쉽게 찾을 수 있습니다.

<form name="myForm">
    <input type="radio" id="genderm" name="gender" value="male" />
    <label for="genderm">Male</label>
    <input type="radio" id="genderf" name="gender" value="female" />
    <label for="genderf">Female</label>
</form>

<script>
    var selected = document.forms.myForm.gender.value;
</script>

---

시험 :

var selectedVal;

for( i = 0; i < document.form_name.gender.length; i++ )
{
  if(document.form_name.gender[i].checked)
    selectedVal = document.form_name.gender[i].value; //male or female
    break;
  }
}

---

루프 없음 :

document.getElementsByName('gender').reduce(function(value, checkable) {
    if(checkable.checked == true) 
        value = checkable.value; 
    return value;
}, '');

reduce 는 첫 번째 인수에 계속해서 배열 요소를 공급하고 이전에 반환 된 함수를 값으로 제공하는 함수일 뿐이며 인스턴스 실행에서는 두 번째 인수의 값을 사용합니다.

이 접근법의 유일한 getElementsByName단점은 reduce가 선택된 라디오 버튼을 찾은 후에도 반환 된 모든 요소를 ​​순회한다는 것 입니다.

참고 URL : https://stackoverflow.com/questions/9561625/checking-value-of-radio-button-group-via-javascript