16

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

たとえば。ラジオボタンは次のとおりです。

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

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

それらは name のフォーム内にありform1ます。やってみると

document.getElementByName("sex").value

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

4

12 に答える 12

21

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に含まれていないのは奇妙です。

于 2010-11-16T17:15:54.780 に答える
8

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

//jQuery
$("input[name='sex']:checked").val()
于 2009-03-02T21:58:06.373 に答える
7

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

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>
于 2009-03-02T21:53:25.370 に答える
7

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

<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>
于 2009-03-02T22:00:22.983 に答える
2

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

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}
于 2009-03-02T22:01:12.607 に答える
1

を使用する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
     }
}
于 2009-03-02T21:56:44.147 に答える
1 
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;
   }
}
于 2009-03-02T21:59:33.640 に答える
1 
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"(フォームフィールド以外のものの可能性があります)。

于 2009-03-02T22:00:02.203 に答える
-1

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

簡単な例

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>

于 2015-09-23T20:42:53.493 に答える