Question

我试图从已检查的单选按钮获取值，并最终将该值传递给其他函数。目前我只是在我的html中有一个单选按钮时才成功。一旦我添加了另一个具有相同名称的单选按钮，我的Javascript功能就无法正常工作。

这是我的Javascript：

function RadioButtonValue (form) {
if (form.elements ["radio"].checked) {
return parseInt (form.elements["radio"].value)
}else{
return 0}
}

function totalRadio (form) {
var radio = RadioButtonValue (form)
form.elements ["total"].value =  radio
}

这是我的HTML：

        <form>
            <input type="radio" name="radio" value="1" />1
            <br />
            <input type="radio" name="radio" value="2"/>2
            <br />
            <input type="button" value="Radio Button Value" onclick="javascript:totalRadio(this.form)" />
            <br />
            <input type="number" name="total" />
    </form>

我正在寻找最简单的Javascript解决方案，我认为使用“for loop”是我需要的解决方案，但我不确定。

提前感谢您的帮助！

Answer 1

您正在使用radio属性来选择元素。因此，当页面上有多个单选按钮元素时，代码会面临歧义。而是使用名称或类属性来选择单选按钮组。这将解决问题。

Answer 2

以下代码适合您。

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

HTML：

 <form>
            <input type="radio" name="radio" value="1" />1
            <br />
            <input type="radio" name="radio" value="2"/>2
            <br />
            <input type="button" value="Radio Button Value" onclick="javascript:totalRadio(this.form)" />
            <br />
            <input type="number" name="total" />
    </form>

Answer 3

这是一个循环，它将以正在处理的形式迭代单选按钮，因此它不会添加任何其他已检查的单选按钮。

function RadioButtonValue (form) {    
   var returnVal = 0;
   var radios = form.elements ["radio"];
   for(var r = 0; r < radios.length; r++) {
        if (radios[r].checked) { 
            returnVal = parseInt (radios[r].value);
        }
   }
  return returnVal;
}

function totalRadio (form) {
    var radio = RadioButtonValue (form)
    form.elements ["total"].value =  radio
}

这是一个小提琴：http://jsfiddle.net/PM8Jm/1/

Answer 4

以下是使用JQuery

的排序和简单示例

<强> HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<form>
        <input type="radio" name="radio" value="1" />1
        <br />
        <input type="radio" name="radio" value="2"/>2
        <br />
        <input type="button" id="btn" value="Radio Button Value">        
        <input type="number" id="total" name="total" />
</form>

<强>的JavaScript

$(document).ready(function () {
   $('#btn').click(function () {
      $('#total').val($('input[name=radio]:radio:checked').val());    
  });
});

这是JSFiddle：Radio Button Demo

Javascript：当存在多个单选按钮时，如何从选中的单选按钮获取值

4 个答案: