web-dev-qa-db-ja.com

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>

JavaScriptを介してgenderの値を取得するにはどうすればよいですか？

javascripthtmlformsradio-button
58
Propeller

jQueryのようなjavascriptライブラリを使用している場合、非常に簡単です：

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

このコードは、checkedの名前を持つgender入力を選択し、valueを取得します。シンプルですね。

ライブデモ

71
gdoron

フレームワークを回避したい場合は、 document.querySelector（） を使用します（ほとんどの場合、これを実行したいと考えています）。

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

純粋なJavascriptの場合：

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

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

更新

ループのない純粋なJavascriptで、新しい（まだサポートされていない可能性がある） RadioNodeList を使用します。

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

唯一の問題は、RadioNodeListがHTMLFormElement.elementsまたはHTMLFieldSetElement.elementsプロパティによってのみ返されることです。したがって、ラジオ入力がラップされるフォームまたはフィールドセットの識別子を最初に取得する必要があります。

84
Anthony

値を取得するには、次のようにします。

document.getElementById("genderf").value;

しかし、ラジオボタンがcheckedであるか選択されているかを確認するには：

document.getElementById("genderf").checked;
8
gideon

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>
3
Chris Smith

試してください：


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;
  }
}
2
Sudhir Bastakoti

ループなし：

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

reduceは、コールバックの2番目の引数に配列要素を連続して送り、以前に関数をvalueに返し、最初の実行では2番目の引数の値を使用する関数です。

このアプローチの唯一のマイナス点は、reduceが選択されたラジオボタンを見つけた後でも、getElementsByNameによって返されるすべての要素をトラバースすることです。

0
przemo_li