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


265

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>

回答:


395

あなたはこのようなことをすることができます:

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;
  }
}
<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

編集:編集の提案を提供してくれたHATCHAとjpsetungに感謝します。


5
これはjquery 1.7で機能していましたが、jQuery 1.9の正しい構文は$( 'input [name = "genderS"]:checked')。val();です。(@を削除)
jptsetung 2013年

1
@構文はそれよりも早く廃止されたと思います(jquery 1.2)
Tom Pietrosanti 2013年

@TomPietrosantiドキュメントが少しずれているようです。jsfiddle.net/ Xxxd3 / 608は<1.7.2 では機能しますが、> 1.8.3 では機能しません。とにかく、@必ず削除する必要があります
jbabey

ええ、彼らはそこにいくつかの後方互換性を残したようですが、一致するようにドキュメントを更新しませんでした。まだ広く使用されている非推奨の機能をいくつか落としたときのフープラを覚えているので、サポートを元に戻しました。たぶんそれが理由です...
Tom Pietrosanti

2
document.querySelector()おそらく今すぐ、ストレートJavaScriptで推奨されるアプローチになるはずです。
Dave、

338

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

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

これは、任意の入力タイプの値を取得する簡単な方法です。また、jQueryパスを含める必要ありませ


23
document.querySelector()を使用することは、純粋なJavaScriptの答えです:developer.mozilla.org/en-US/docs/Web/API/document.querySelector
AdamJonR

8
バリアベルに保存し、ラジオボタンが選択されていない場合は、ブラウザが停止します。コンソールは言う:TypeError document.querySelector(...)is nullです。
call-me

14
それが選択されている場合にのみ機能します。だから、あなたはそれを前にチェックするべきです。 var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);
Markus Zeller、2015

私はMeteorでテンプレートを使用していますが、その:checkedトリックはそれを完全に打ち明けてくれました。私にとって、Meteorテンプレートフォームからラジオボタンを読み取るための修正はaccountType = template.find("[name='optradio']:checked").value;
zipzit

IE11で一貫して機能しないエンタープライズ環境が1つあります。ある種の後方互換モードです。
スティーブブラック

35
document.forms.your-form-name.elements.radio-button-name.value

5
これは、あまりにも動作します:document.forms.your-form-name.name-shared-by-radio-buttons.value
Web_Designer

7
ほとんどの人はこれを見落としていると思います。受け入れられた答えは機能します。Giorgos Tsakonasの回答の方が優れています。しかし、これは根本的に正しい答えです。これは、ラジオボタンが実際に機能する方法です。何も選択されていない場合は、空の文字列を返します。
マークゴールドファイン

@Web_Designerあなたのコメントも本当の答えではありませんか?
表意文字'12

これは、ラジオ入力がフォームでない場合は機能しないため、querySelectorの1つよりも適切な答えではないと思います。おそらく、これら2つをマージする必要があります。
トマーシュHübelbauer

ラジオがラベルの中にある場合、この方法は機能しません
イゴールフォメンコ

19

jQuery 1.8以降、クエリの正しい構文は

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

ない$('input[@name="genderS"]:checked').val();もはや、(とjQueryの1.7で働きました@)。


16

ECMAScript 6バージョン

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

16

最も簡単な解決策:

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

1
2つの理由で賛成票が投じられました:1.機能します。2.それは完全なjqueryの答えではありませんでした。
ジョン

21
これは、1年前に出された上記の@Giorgos Tsakonasの回答の正確なコピーです。
T Nguyen

7

これを試して

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;
}

ここのフィドル。


6

編集:Chips_100で述べたように、以下を使用する必要があります。

var sizes = document.theForm[field];

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


古い答え:

あなたはこれがeval好きではないですか?

var sizes = eval(test);

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


ここでevalは最良のオプションではありません... var sizes = document.theForm[field];最初の割り当てを言って削除したいので、testもう変数を使用しません。
デニス

私の知る限り、evalはそのまま機能しますか?またはそれだけで動作しeval('var sizes=document.theForm.' + field)ますか?
Michael Laffargue、2012年

あなたの答えのevalステートメントはvar sizes = eval(test);そのように機能します(私はそれをfirebugでテストします)。
Dennis

これはもっと理にかなっていますがfield、角かっこで囲んだ行に「予期しないトークン[」というエラーが表示されます。なぜだと思いますか?
mkyong 2012年

4

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

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

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

  • 1行目:<input>(a)がタイプであり、(b)がのname属性を持ち、genderS(c)がチェックされているコントロールへの参照を取得します。
  • 2行目:そのようなコントロールがある場合は、その値を返します。ない場合は、空の文字列を返します。genderSRadio1行目の発見制御及びヌル/ falseyそうでない場合ならば、変数はtruthyです。

JQueryの場合は、@ jbabeyの回答を使用しますundefined。ラジオボタンが選択されていない場合は、が返されることに注意してください。


4

誰かが答えを探していて、私のようにここに上陸した場合、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


3

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");
   }    
}

デモhttp : //jsfiddle.net/ipsjolly/hgdWp/2/ [ ラジオを選択せず​​に[検索 ]をクリックします ]

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


2

チェックされたラジオボタンの値をプレーンなJavaScriptで取得する良い方法は次のとおりです。

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

出典:https : //ultimatecourses.com/blog/get-value-checked-radio-buttons

このHTMLを使用:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

また、使用することができアレイ検索checkedチェックされた項目を見つけるためのプロパティを:

Array.from(form.elements.characters).find(radio => radio.checked);

1

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

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

1

フォームにラジオボタンの異なる行を配置する必要があるとしましょう。各行には個別の属性名( '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>

また、フォームと一緒に送信される非表示のフォーム要素に最終出力を挿入します。



0

フォーム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">

-3
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

などを使用します

  $("#rdbExamples:checked").val()

または

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.