Javascript 如何使用js获取选中的单选按钮值

How to get the selected radio button value using js

提问by Meena

I am using this code to get the value of currently selected radio button, but it doesn't work.

我正在使用此代码来获取当前选定的单选按钮的值，但它不起作用。

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

How to get the currently selected radio button value using Javascript?

如何使用Javascript获取当前选择的单选按钮值？

回答by Mihai Alin

HTML

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

JS

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

回答by Chamika Sandamal

If you are using jQuery, following code will work for you.

如果您使用的是 jQuery，以下代码对您有用。

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

回答by Quentin

Radio buttons come in groups which have the same name and different ids, one of them will have the checked property set to true, so loop over them until you find it.

单选按钮成组出现，它们具有相同的名称和不同的 id，其中一个将检查属性设置为 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);
}

回答by Sanjay

check this

检查这个

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

Example

例子

回答by Stan1ey

Maybe I'm missing something here, but wouldn't the good old standard JS work? I mean:

也许我在这里遗漏了一些东西，但是好的旧标准 JS 不会工作吗？我的意思是：

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

... which is only valid of course if have provided "value" for your radio input elements.

...当然只有在为您的无线电输入元素提供“价值”时才有效。

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

The value should be either 'red' or 'blue' in the above example.

在上面的示例中，该值应为“红色”或“蓝色”。

回答by Abhaysingh N. Rajpurohit

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

回答by Alan

A simpler way of doing this is to use a global js variable that simply holds the id of the clicked radio button. Then you don't have to waste code spinning thru your radio lists looking for the selected value. I have done this in cases where I have a dynamically generated list of 100 or more radio buttons. spinning thru them is (almost imperceptible) slow, but this is an easier solution.

一种更简单的方法是使用一个全局 js 变量，它只保存单击的单选按钮的 id。这样您就不必浪费代码在收音机列表中查找所选值。在我有一个动态生成的 100 个或更多单选按钮列表的情况下，我已经这样做了。通过它们旋转（几乎察觉不到）很慢，但这是一个更简单的解决方案。

you can also do this with the id, but you usually just want the value.

您也可以使用 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

回答by Nauphal

Since you want to get it using plain javascript, you can use the following code

由于您想使用普通的javascript来获取它，您可以使用以下代码

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

回答by Breandán Fawcett

Possibly not the most efficient way... but I have used an ID on each radio button (this is just because I'm not passing it as an actual form, it is just the raw fields).

可能不是最有效的方法......但我在每个单选按钮上使用了一个 ID（这只是因为我没有将它作为实际表单传递，它只是原始字段）。

I then call a function with a button, which checks each radio button to see if it is checked. It does this using the .checkedfunction. If this is set to true I can change the value of another variable.

然后我调用一个带有按钮的函数，它检查每个单选按钮以查看它是否被选中。它使用该.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>

Hope this is useful, in someway,

希望这是有用的，在某种程度上，

Beanz

比恩兹

回答by Emily Zhai

You could do something very similar to Beanz's answer but instead of using IDs, use classes to reduce redundancy.

您可以执行与 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>