javascript - 選択したラジオボタンの値を取得するには?

Question

ラジオボタンのグループから選択した値を取得したい。

ここに私のHTMLがあります:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

これが私のjsです：

var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
    rate_value = document.getElementById('r1').value;
    
}else if(rates =='Variable Rate'){
    rate_value = document.getElementById('r2').value;
    
}else if(rates =='Multi Rate'){
    rate_value = document.getElementById('r3').value;
}  

document.getElementById('results').innerHTML = rate_value;

私は未定義になり続けます。

score 652 · Accepted Answer

これは、IE9 以降およびその他のすべてのブラウザーで機能します。

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

score 296 · Accepted Answer

var rates = document.getElementById('rates').value;

レート要素はであるdivため、値はありません。これはおそらく、undefinedがどこから来ているかです。

checkedプロパティは、要素が選択されているかどうかを示します。

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

または

$("input[type='radio'][name='rate']:checked").val();

score 155 · Accepted Answer

プロパティを使用して値を取得できcheckedます。

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

score 43 · Accepted Answer

エッジに住んでいるあなたのために：

現在、RadioNodeListと呼ばれるものがあり、その value プロパティにアクセスすると、現在チェックされている入力の値が返されます。これにより、投稿された回答の多くで見られるように、最初に「チェック済み」入力を除外する必要がなくなります。

フォーム例

<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>

チェックされた値を取得するには、次のようにします。

var form = document.getElementById("test");
alert(form.elements["test"].value);

それを証明する JSFiddle: http://jsfiddle.net/vjop5xtq/

これは Firefox 33 で実装されたことに注意してください (他の主要なブラウザーはすべてサポートしているようです)。RadioNodeList古いブラウザでは、これが正しく機能するためにpolfyill が必要です。

score 17 · Accepted Answer

私のために働いたものは、api.jquery.comから以下に示されています。

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

変数 selectedOption には、選択されたラジオボタン (つまり、o1 または o2) の値が含まれます。

score 15 · Accepted Answer

別の (明らかに古い) オプションは、次の形式を使用することです: "document.nameOfTheForm.nameOfTheInput.value;" 例document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

フォーム内で要素を名前で参照できます。ただし、元の HTML にはフォーム要素が含まれていません。

ここでフィドル (Chrome と Firefox で動作): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

score 5 · Accepted Answer

フォーム要素がmyForm以下の変数によって参照され、ラジオボタンが「my-radio-button-group-name」という名前を共有すると仮定すると、以下は純粋な JavaScript であり、標準に準拠しています (ただし、どこでも使用できるかどうかは確認していません)。 ):

myForm.elements.namedItem("my-radio-button-group-name").value

上記は、チェックされた(または、選択されているとも呼ばれる) ラジオボタン要素の値を生成しますnull。ソリューションの核心は、namedItem特にラジオボタンで機能する機能です。

通常はオブジェクトを返すため、HTMLFormElement.elements、HTMLFormControlsCollection.namedItem、特にRadioNodeList.valueを参照してください。namedItem RadioNodeList

私が MDN を使用するのは、MDN を使用すると標準への準拠を少なくとも大部分は追跡できるからです。また、多くの WhatWG や W3C の出版物よりも理解しやすいからです。

score 4 · Accepted Answer

最短

[...rates.children].find(c=>c.checked).value

let v= [...rates.children].find(c=>c.checked).value

console.log(v);

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

score 3 · Accepted Answer

ラジオボタンを何度も直接呼び出すと、CHECKED ボタンではなく、FIRST ボタンの値が得られます。ラジオボタンをループしてどれがチェックされているかを確認する代わりに、onclick後で自由に取得できる変数を設定するjavascript関数を呼び出すことを好みます。

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

これは次を呼び出します：

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

追加の利点は、データを処理したり、ボタンのチェックに反応したりできることです (この場合は、SUBMIT ボタンを有効にします)。

score 2 · Accepted Answer

以前に提案された関数の改善:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

score 2 · Accepted Answer

.find()チェックされた要素を選択するために使用できます：

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

score 2 · Accepted Answer

純粋な JavaScript でのこの問題に対する私の見解は、チェックされたノードを見つけ、その値を見つけて、配列からポップアウトすることです。

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

アロー関数を使用していることに注意してください。実際の例については、このフィドルを参照してください。

score 0 · Accepted Answer

jQuery.click 関数を使用して、目的の出力を取得しました。

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

それが役に立てば幸い。

score 0 · Accepted Answer

var rates = document.getElementById('rates').value;

そのようなラジオボタンの値を取得することはできません代わりに使用します

rate_value = document.getElementById('r1').value;

javascript - 選択したラジオボタンの値を取得するには?

30 に答える 30

最短

Related

Reference