web-dev-qa-db-ja.com

DOMを使用してラジオボタンの値にアクセスするにはどうすればよいですか？

DOMを使用してラジオボタンの値にアクセスするにはどうすればよいですか？

たとえば次のようなラジオボタンがあります。

<input name="sex" type="radio" value="male">

<input name="sex" type="radio" value="female">

それらはform1という名前のフォーム内にあります。私がしようとすると

document.getElementByName("sex").value

チェックされた値に関係なく、常に「男性」を返します。

javascriptdomradio-button
16
akhil

Canavarの非常に役立つ機能を「一般化」するだけです。

function getRadioValue(theRadioGroup)
{
    var elements = document.getElementsByName(theRadioGroup);
    for (var i = 0, l = elements.length; i < l; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

...このように参照されるようになります：

getRadioValue('sex');

このようなものは、まだprototype.jsの一部ではありません。

20
Canuckster

選択したものが必要な場合、ほとんどのフレームワークは次のような機能をサポートしています。

//jQuery
$("input[name='sex']:checked").val()
9
ericteubert

誰もがセレクターAPIの実際の使用を提案していません。

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

ブラウザのサポートは良好です

8
Daniel Worthington-Bodart

いくつかの方法があります。

1.各入力にIDを付けます

_<input name="sex" id="sex_male" type="radio" value="male">
<input name="sex" id="sex_female" type="radio" value="female">
_

次に、document.getElementById("sex_male")を使用できます

2. PrototypeJSのようなものを使用します（jQueryも機能します）

その後、次のようなことができます：

_//This loops over all input elements that have a name of "sex"
$$('input[name="sex"]').each( function(elem) {
  //Do something
});
_

または、「男性」ラジオボタンだけを取得するには、次のようにします。

_$$('input[name="sex"][value="male"]').each(function(elem) {
  //Do something
});
_

Prototype を開始する簡単な方法は、ページの<head> </ head>タグの間にこれを追加して、Googleから追加することです。

_<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
_
7
Mark Biek

次の方法で、選択したラジオの値を取得できます。

<script>
function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('sex').length; i++)
    {
        if (document.getElementsByName('sex')[i].checked)
        {
            return document.getElementsByName('sex')[i].value;
        }
    }
}
</script>
6
Canavar

選択したものを必要とするが、便利なフレームワークがない場合は、要素配列を反復処理して、チェックされているものを探します。

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}
2
Jarret Hardie

document.form1.sexを使用すると、配列が返されます。

document.form1.sex[0] =最初のラジオボタン

document.form1.sex[1] = 2番目のラジオボタン

どちらがチェックされているかを確認するには、ループする必要があります。

whoChecked(document.form1.sex)

function whoChecked(fieldName) {
   for(var x=0;x<fieldName.length;x++) {
     if(fieldName[x].checked) {
        return fieldname[x].value
     }
}
1
Diodeus - James MacFarlane
var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
   if(list[i].type=='radio' && list[i].checked){
      alert(list[i].value);
      break;
   }
}
1
Manu
_document.getElementByName("sex").value
_

あなたはgetElementsByName('sex')[0].valueを意味しますか？ （getElementByNameはありません。）

もちろん、その名前の最初の入力要素が常に選択されます。値は実際に男性です。次に、「。checked」プロパティを使用して、それが選択されているかどうかを確認します。

この単純なケースでは、次の方法で回避できます。

_var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';
_

一般的なケースでは、各無線入力をループして、どちらがチェックされているかを確認する必要があります。最初にフォームオブジェクトを取得し（フォームにIDを付けて_document.getElementById_を使用する方が、一般に「名前」ベースのdocument.formsコレクションを使用するよりも優れています）、次にform.elements.sexにアクセスする方が良いでしょう。ページに_name="sex"_属性（フォームフィールド以外の可能性がある）を持つ他の要素がある場合に、リストを取得します。

1
bobince
function getEleByName(){
    if(true==document.getElementsByName('gender')[0].checked){
        alert('selected gender is: male');
    }
    else{
        alert('selected gender is: female');
    }
}
1
LN G
  • document.all.sex [0] .checked
  • document.all.set [1] .checked
0
Yundong Cai

他の人が示したように、ループはタスクを達成できますが、必要に応じてパフォーマンスを向上させるループを使用するよりも簡単な場合があります。また、ポータブル/モジュラーにすることができるため、さまざまな無線グループに使用できます。

簡単な例

function getValue(x) {
  alert(x.value);
}
<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

より複雑な例：

function getValue(x){
  alert(x.value);
}
<fieldset>
  <legend>Sex</legend>
  <label>Male:
    <input name="sex" type="radio" value="male" onChange="getValue(this)"/>
  </label>
  <label>Female:
    <input name="sex" type="radio" value="female" onChange="getValue(this)" />
  </label>
</fieldset>
<fieldset>
  <legend>Age Group</legend>
  <label>0-13:
    <input name="ageGroup" type="radio" value="0-13" onChange="getValue(this)" />
  </label>
  <label>13-18:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>18-30:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>30+:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
</fieldset>
0
CrandellWS