web-dev-qa-db-ja.com

選択したラジオボタンの値を取得する方法

私は私のJSプログラムに何らかの奇妙な問題を抱えています。これは正しく機能していましたが、何らかの理由で機能しなくなりました。ラジオボタンの値（どれが選択されているか）を見つけてそれを変数に返したいだけです。何らかの理由でundefinedを返し続けます。

これが私のコードです：

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm：

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML：

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>
javascripthtmlfor-loopradio-button
210
mkyong

JavaScript：

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
  alert(radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

http://jsfiddle.net/Xxxd3/610/

編集：編集の提案をありがとうHATCHAとjpsetung。

356
jbabey

これはどのエクスプローラでも機能します。

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

あらゆる入力型の値を取得する最も純粋な方法です。また、notjQueryパスを含める必要はありません）も行います。

200
Giorgos Tsakonas
document.forms.your-form-name.elements.radio-button-name.value
18
imran ansari

最も簡単な解決策：

 document.querySelector('input[name=genderS]:checked').value
17
Bobur Saidov

JQuery 1.8以降、このクエリの正しい構文は次のとおりです。

$('input[name="genderS"]:checked').val();

JQuery 1.7で（ @ を使って）動作していた、もはや$('input[@name="genderS"]:checked').val();ではありません。

16
jptsetung

ECMAScript 6バージョン

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;
13
Nappy

これを試して

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

いじる ここ 。

7
The Alpha

編集：Chips_100で言ったようにあなたが使用する必要があります：

var sizes = document.theForm[field];

テスト変数を使用せずに直接。

古い答え：

evalはこのようにしませんか？

var sizes = eval(test);

それがどのように機能するのか私にはわかりませんが、私には文字列をコピーするだけです。

6
Michael Laffargue

誰かが答えを探していて私のようにここに上陸した場合は、Chrome 34とFirefox 33から以下のことができます。

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

もっと簡単

alert(document.theForm.genderS.value);

refrence： https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

4
ashraf aaref
 document.querySelector('input[name=genderS]:checked').value
3
alluma

これは@Fontasによる回答に基づいた純粋なJavaScriptですが、ラジオボタンが選択されていない場合は空の文字列を返す（そしてTypeErrorを回避する）ための安全コードが付いています。

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

コードは次のように分類されます。

  • 1行目：（a）が<input>型、（b）がnameのgenderS属性を持ち、（c）がチェックされているというコントロールへの参照を取得します。
  • 2行目：そのようなコントロールがある場合は、その値を返します。ない場合は、空の文字列を返します。 1行目でコントロールが見つかった場合はgenderSRadio変数は真実で、見つからなかった場合はnull/falseyです。

JQueryの場合は、@ jbabeyの回答を使用します。選択されたラジオボタンがない場合は、undefinedが返されます。

3
Ed Gibbs

これはChecked = "checked"属性が使われていないラジオの例です。

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

_ demo _ ： http://jsfiddle.net/ipsjolly/hgdWp/2/ / [ ラジオを選択せず​​に検索をクリック ]

ソース： http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

2
Code Spy

それぞれが別々の属性名（ 'option1'、 'option2'など）を持ち、同じクラス名を持つ、異なる行のラジオボタンをフォームに配置する必要があるとしましょう。たぶんあなたはそれらがそれぞれ質問に関連する1から5のスケールに基づいて値を提出する複数の列でそれらを必要とします。あなたは以下のようにあなたのJavaScriptを書くことができます：

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

また、最終出力を隠しフォーム要素に挿入してフォームと一緒に送信します。

1
Bruce Tong

純粋なJavaScriptを使用して、イベントを送出したオブジェクトへの参照を処理できます。

function (event) {
    console.log(event.target.value);
}
0
antonjs

あなたがあなたのform element（）のためにIdを割り当てることが可能であるならば、この方法は安全な代替方法と考えられることができます（特にラジオグループ要素名が文書内でユニークでないとき）：

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML：

<form action="#n" name="theForm" id="yourFormId">
0
MMKarami