web-dev-qa-db-ja.com

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

現在選択されているラジオボタンの値を取得するためにこのコードを使用していますが、機能しません。

var mailcopy = document.getElementById('mailCopy').value;

Javascriptを使用して現在選択されているラジオボタンの値を取得する方法は？

javascriptradio-button
48
Meena

HTML

<p>Gender</p>
<input type="radio" id="gender0" name="gender" value="Male">Male<br>
<input type="radio" id="gender1" name="gender" value="Female">Female<br>

JS

var gender = document.querySelector('input[name = "gender"]:checked').value;
document.writeln("You entered " + gender + " for your gender<br>");
82
Mihai Alin

JQueryを使用している場合、次のコードが役立ちます。

$('input[name=radioName]:checked').val();
46
Chamika Sandamal

ラジオボタンは、同じ名前と異なるIDを持つグループに分類されます。そのうちの1つは、checkedプロパティがtrueに設定されているため、見つかるまでループします。

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}
var checkedButton = getCheckedRadio(document.forms.frmId.elements.groupName);
if (checkedButton) {
    alert("The value is " + checkedButton.value);
}
34
Quentin

これをチェックして

<input class="gender" type="radio" name="sex" value="male">Male
<br>
<input class="gender" type="radio" name="sex" value="female">Female


<script type="text/javascript">
$(document).ready(function () {
$(".gender").change(function () {

    var val = $('.gender:checked').val();
    alert(val);
});
});

</script>

例

4
Sanjay

たぶん私はここで何かを見逃していますが、古き良き標準JSは動作しませんか？というのは：

var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value;

...もちろん、無線入力要素に「値」を指定した場合にのみ有効です。

<input type="radio" name="radio-group-name" value="red" checked>
<input type="radio" name="radio-group-name" value="blue">

上記の例では、値は「赤」または「青」のいずれかでなければなりません。

4
Stan1ey
function getCheckedValue(radioObj, name) {

    for (j = 0; j < radioObj.rows.length; ++j) {
        for (k = 0; k < radioObj.cells.length; ++k) {
            var radioChoice = document.getElementById(name + "_" + k);
            if (radioChoice.checked) {
                return radioChoice.value;
            }
        }
    }
    return "";
}
2
Abhaysingh N. Rajpurohit

これを行う簡単な方法は、クリックされたラジオボタンのIDを単に保持するグローバルjs変数を使用することです。そうすれば、選択した値を探すためにラジオリストを介してコードをスピンする無駄を省く必要はありません。 100以上のラジオボタンの動的に生成されたリストがある場合、これを実行しました。それらを回転させることは（ほとんど感知できない）遅いですが、これは簡単な解決策です。

idを使用してこれを行うこともできますが、通常は値だけが必要です。

<script>
var gRadioValue = ''; //global declared outside of function
function myRadioFunc(){
    var radioVal = gRadioValue;  
    // or maybe: var whichRadio = document.getElementById(gWhichCheckedId);
    //do somethign with radioVal
}
<script>

<input type="radio" name="rdo" id="rdo1" value="1" onClick="gRadioValue =this.value;"> One
<input type="radio" name="rdo" id="rdo2" value="2" onClick="gRadioValue =this.value;"> Two
...
<input type="radio" name="rdo" id="rdo99" value="99" onClick="gRadioValue =this.value;"> 99
1
Alan

全員がこの例をテストでき、理解しやすいです。

        Name:   <input type="text" id="text" class ="input">
                <input type="text" id="text1" class ="input">
        Gender: <input type="radio" id="m" class="Rm"  name="Rmale" value="Male">
                <input type="radio" id="f" class="Rm" name="Rfemale" value="Female">
        Course: <input type="checkbox" id="math" class="cm" name="Cmath" value="Math">
                <input type="checkbox" id="physic" class="cm" name="Cphysic" value="Physic">
                <input type="checkbox" id="eng" class="cm"  name="Ceng" value="English">
        <button type="button" id="b1">show</button>

// javascript

    <script>
        function getData(input){
            return document.getElementById(input).value;
        }
        function dataByClassName(st){
            var value=document.getElementsByClassName(st)
            for(var i=0;i < value.length;i++){
                if(value[i].checked){
                    return value[i].value;
                }
            }
        }
        document.getElementById("b1").onclick = function ()
        {
            var st={
                name : getData("text")+getData("text1"),
                gender : dataByClassName("Rm"),
                course : dataByClassName("cm")
            };
            alert(st.name+" "+st.gender+" "+st.course);
        };

    </script>
0
Sophy Heng

おそらく最も効率的な方法ではありません...しかし、各ラジオボタンでIDを使用しました（これは、実際のフォームとして渡すのではなく、単なる生のフィールドです）。

次に、ボタンを使用して関数を呼び出します。この関数は、各ラジオボタンをチェックして、チェックされているかどうかを確認します。 .checked関数を使用してこれを行います。これがtrueに設定されている場合、別の変数の値を変更できます。

function createOutput() {
  var order = "in";
  if (document.getElementById('radio1').checked == true) {
    order = "pre";
  } else if (document.getElementById('radio2').checked == true) {
    order = "in";
  } else if (document.getElementById('radio3').checked == true) {
    order = "post";
  }
  document.getElementById('outputBox').innerHTML = order;
}
<input id="radio1" type="radio" name="order" value="preorder" />Preorder
<input id="radio2" type="radio" name="order" value="inorder" checked="true" />Inorder
<input id="radio3" type="radio" name="order" value="postorder" />Postorder
<button onclick="createOutput();">Generate Output</button>
<textarea id="outputBox" rows="10" cols="50"></textarea>

これが何らかの形で役立つことを願っています。

ビーンズ

0
Breandán Fawcett

これを使用できます

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

または、jqueryの古いバージョンの場合

$('input[@name="field_value"]:checked').val();
0
Mughal Sahab

プレーンなJavaScriptを使用して取得するため、次のコードを使用できます。

var val = '';
if(document.getElementById('radio1').checked) {
  val = document.getElementById('radio1').value
}else if(document.getElementById('radio2').checked) {
  val = document.getElementById('radio2').value
}
0
Nauphal

Beanzの答えと非常によく似たことができますが、IDを使用する代わりに、クラスを使用して冗長性を減らします。

function getSelectedValue() {
  var radioBtns = document.getElementsByClassName("radioBtn");
  for(var i = 0; i < radioBtns.length; i++){
    if(radioBtns[i].checked){
      document.getElementById("output").textContent = radioBtns[i].value; 
    }
  }
}
<input class="radioBtn" type="radio" name="order" value="button1" />Button 1<br>
<input class="radioBtn" type="radio" name="order" value="button2" />Button 2<br>
<input class="radioBtn" type="radio" name="order" value="button3" />Button 3<br>
<button onclick="getSelectedValue();">Get Value of Selected Radio</button><br>
<textarea id="output"></textarea>
0
Emily Zhai

これを試して、これがうまくいくことを願っています

function loadRadioButton(objectName, selectedValue) {

    var radioButtons = document.getElementsByName(objectName);

    if (radioButtons != null) {
        for (var radioCount = 0; radioCount < radioButtons.length; radioCount++) {
            if (radioButtons[radioCount].value == selectedValue) {
                radioButtons[radioCount].checked = true;
            }
        }
    }
}
0
user3585199