web-dev-qa-db-ja.com

JavaScriptで、指定された名前のページ内のすべてのラジオボタンを取得するにはどうすればよいですか？

タイトルが言うように、 JavaScript で、指定された名前のページ上のすべてのラジオボタンを取得するための最良の方法は何ですか？最終的には、これを使用して、どの特定のラジオボタンが選択されているかを判断するので、質問を表現する別の方法：

JavaScriptで文字列変数が与えられた場合、その文字列が現在選択されている正確なラジオボタン入力要素（存在する場合）をどのように判断できますか？

私はjQueryを使用していません。 jQueryの回答を提供したい場合は、先に進んでください。他の誰かがそれが役に立つと思うかもしれません。しかし、それは私を助けませんし、私はそれを賛成しません。

javascriptradio-button
14
Joel Coehoorn

document.getElementsByName()を使用して、無線グループの名前を渡し、それらをループしてchecked属性を調べることができます。何かのようなもの：

function getCheckedValue( groupName ) {
    var radios = document.getElementsByName( groupName );
    for( i = 0; i < radios.length; i++ ) {
        if( radios[i].checked ) {
            return radios[i].value;
        }
    }
    return null;
}
25
Rob

Document.getElementsByName（）を使用すると、質問に対する簡単な回答になります。

ただし、次のようなことを行う方がよい場合があります。

<form name="formFoo">
  Foo: <input type="radio" name="groupFoo" value="foo" checked> <br />
  Bar: <input type="radio" name="groupFoo" value="bar"> <br />
  Baz: <input type="radio" name="groupFoo" value="baz"> <br />
  <input type="submit" >
</form>

次に、JavaScriptを使用します。

function getRadioValue(formName, groupName) {
    var radioGroup = document[formName][groupName];
    for (var i=0; i<radioGroup.length; i++)  {
       if (radioGroup[i].checked)  {
       return radioGroup[i].value;
       }
    }
    return null;
}

これにより、ドキュメント全体を検索する機能を使用する必要がなくなります。最初にフォームを検索し、次にそのフォーム内で同じ名前のコントロールを検索します。ここでの問題は、フォームの中央に同じ名前のチェックボックスがある場合、正しいラジオ値の代わりにチェックボックスが返される可能性があることです。同じ名前で別のタイプのコントロールがスローされた場合、エラーが発生する可能性があります。これらの状況は両方ともプログラマーのエラーと見なされる可能性がありますが、パフォーマンスが低下する可能性があるため、関数を拡張してそれらをチェックしても問題はありません。行を変更するだけです：

       if (radioGroup[i].checked)  {

に：

       if (radioGroup[i].type=='radio' && radioGroup[i].checked)  {
8
Joshua D. Boyd

getElementsByNameは私には機能しませんでした。これは私がしました：

    var radios = document.getElementsByTagName('input');
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            nbchecked++;
        }
    }
6
Robin
var options = document.getElementsByName('myRadioButtons');
for(i = 0; i < options.length; i++)
{
    var opt = options[i];
    if(opt.type=="radio")
    {              
        if(opt.checked)
        {
        }                  
    }
}
3
Phaedrus

JQueryの答えをかじります

var selectedValue = $("input[name='radio_name']:checked").val();
3
Bob
<form name="myForm" id="myForm" action="">  
<input type="radio" name="radioButton" value="c1">Choice 1
<input type="radio" name="radioButton" value="c2">Choice 2
</form>
<script>
var formElements = window.document.getElementById("myForm").elements;
var formElement;
var radioArray = [];

for (var i = 0, j = 0; i < formElements.length; i++) {
    formElement = formElements.item(i);
    if (formElement.type === "radio" && formElement.name === "radioButton") {
        radioArray[j] = formElement;
        ++j;
    }
}
alert(radioArray[0].value);
alert(radioArray[1].value);
</script>
2
GR1000

すべてのラジオボタンを名前で直接取得するには：

_element.querySelectorAll("input[name='nameOfTheName']")
_

querySelectorAll()メソッドを使用して、特定のタイプの要素を名前で取得できます。特定の状況でgetElementsByName()と比較してquerySelectorAllを使用することには利点があります。 getElementsByName以外でdocumentを使用すると、エラーが発生します。

element_Name_Here.getElementsByNameは関数ではありません

ただし、querySelectorAll()はドキュメントのサブ要素で使用できます。これは、すべて同じ構造を持つ複数の要素（リスト内の行）から1つの要素を取得する場合に役立ちます。その場合、すべての行に個別のIDを与えようとしないでください。その場合、呼び出された関数にthisを渡して、parentNodeを取得し、親から特定の属性を検索できます。これにより、ドキュメント全体を検索する必要がなくなります。

html

_<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
<div>
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
  <input type="radio" name="nameOfName" onchange="getOnlyThisRowsRadios(this)">
</div>
_

脚本

_function getOnlyThisRowsRadios(thiz) {
  var i,L,parentElement,radioButtons;

  parentElement = thiz.parentNode;//Get the parent of the element
  radioButtons = parentElement.querySelectorAll("input[name='nameOfTheName']");
  console.log('radioButtons: ' + radioButtons)

  L = radioButtons.length;
  console.log('L: ' + L)

  for (i=0;i<L;i++) {
    console.log('radBttns[i].checked: ' + radBttns[i].checked)
    radBttns[i].checked = false;//Un-check all checked radios
  }
_
0
Alan Wells
$("input[type='radio'][name='xxxxx']:checked").val()
0
Andy T