如何获取已选中单选按钮的值?

时间:2013-02-28 19:38:40

标签: javascript radio-button

我将这个简单的脚本附加到调查问卷上,并且在选择的答案显示在textarea中时遇到问题。这是脚本:

function check() {
  var complete = 0;
  var total = 0;

  for (i=0;i<document.form.length;i++)
  {
     if (document.form.elements[i].checked == true && complete < 10) {
        complete++;
        total = (total) + (Math.round(document.form.elements[i].value));
     }
  }

  if (complete >= 10) {
     document.form.message.value = document.form.question1.value;
  }
}

这是HTML:

<input type="radio" value="1" name="question1" onclick="check()"> A<br />
<input type="radio" value="2" name="question1" onclick="check()"> B<br />
<input type="radio" value="3" name="question1" onclick="check()"> C<br />
<input type="radio" value="4" name="question1" onclick="check()"> D<br />

<input type="radio" value="1" name="question2" onclick="check()"> E<br />
<input type="radio" value="2" name="question2" onclick="check()"> F<br />
<input type="radio" value="3" name="question2" onclick="check()"> G<br />
<input type="radio" value="4" name="question2" onclick="check()"> H<br />

<textarea name="message"></textarea>

我希望返回值,但我得到undefined。如果我改变脚本中返回文本的行:

  document.form.message.value = document.form.question1;

我得到[object NodeList]。我知道我错过了这么简单的事情,但对于我的生活,我找不到它。

另外,我可以将字母A到H连同值一起返回吗?我知道我可以用字母替换值,但需要那里的数字进行计算。

5 个答案:

答案 0 :(得分:1)

您正在脚本中引用表单元素,是否定义了表单?

答案似乎在这里得到解决 Attach event listener through javascript to radio button

答案 1 :(得分:1)

我的回答是假设您希望<textarea>填充类似于以下内容的文字:

用户回答1问题A

用户回答2问题F

要传回 A F ,我需要按以下方式修改您的HTML:

<input type="radio" value="1" name="question1" onclick="check(this, 'A')"> A<br />
<input type="radio" value="2" name="question1" onclick="check(this, 'B')"> B<br />
<input type="radio" value="3" name="question1" onclick="check(this, 'C')"> C<br />
<input type="radio" value="4" name="question1" onclick="check(this, 'D')"> D<br />

<input type="radio" value="1" name="question2" onclick="check(this, 'E')"> E<br />
<input type="radio" value="2" name="question2" onclick="check(this, 'F')"> F<br />
<input type="radio" value="3" name="question2" onclick="check(this, 'G')"> G<br />
<input type="radio" value="4" name="question2" onclick="check(this, 'H')"> H<br />

<textarea name="message"></textarea>

否则,字母与收音机输入之间没有实际连接。

无论如何,这就是我所做的:

我注意到每个组都重复了相同的功能,所以我创建了一个Object Constructor:

var Answer = function () {
    this.text = '';
};

this.text将包含每个组的特殊答案字符串。

现在让我们创建两个答案组对象:

var answerOne = new Answer();
var answerTwo = new Answer();

接下来是check()函数,我们传递input元素及其相关的答案字符:

var check = function (_input, _question) {
    if (_input.name === "question1") {
        answerOne.text = "User answered " + _input.value + " for Question " + _question + "\n";
    }
    if (_input.name === "question2") {
        answerTwo.text = "User answered " + _input.value + " for Question " + _question + "\n";
    }
    document.getElementsByName('message')[0].value = answerOne.text + answerTwo.text;
};

现在,当用户选择答案时,相应的答案组的字符串会相应更新,而不会影响其他组的答案字符串。

这是一个有效的jsfiddle:http://jsfiddle.net/smokinjoe/uC76f/13/

希望有所帮助!

答案 2 :(得分:0)

在这里,您可以找到完整的解决方案。

您的代码中出现了一些问题。 1.从无线电组获得价值的方式。您需要迭代并找出检查的内容 2.将值设置为textarea。您需要执行getElemenetsByName[x]

<script>
function check() {
  var complete = 0;
  var total = 0;

    var x = document.getElementsByTagName('input');
    for(var k=0;k<x.length;k++){

            if (x[k].checked && complete < 10) {
                complete++;
                total = total + Math.round(x[k].value);
            } 

    }    

    (document.getElementsByName('message')[0]).value = total;       
}


</script>
<input type="radio" value="1" name="question1" onclick="check()"> A<br />
<input type="radio" value="2" name="question1" onclick="check()"> B<br />
<input type="radio" value="3" name="question1" onclick="check()"> C<br />
<input type="radio" value="4" name="question1" onclick="check()"> D<br />

<input type="radio" value="1" name="question2" onclick="check()"> E<br />
<input type="radio" value="2" name="question2" onclick="check()"> F<br />
<input type="radio" value="3" name="question2" onclick="check()"> G<br />
<input type="radio" value="4" name="question2" onclick="check()"> H<br />

<textarea name="message"></textarea>

答案 3 :(得分:0)

因为它是一个单选按钮,您需要遍历所有值以找到已选择的值。这样的事情应该有效:

for (var i=0; i < document.form.question1.length; i++)
   {
   if (document.form.question1[i].checked)
      {
       document.form.message.value = document.form.question1[i].value;
      }
   }
}

答案 4 :(得分:0)

没有对此进行测试,因为我不知道您的表单的名称(或ID),或者您的文档中有多少表单,我已经通过它的id引用了您的表单。

function check() {
    var complete = 0;
    var total = 0;
    var formId = 'EnterYourFormId';  // This could be passed as a paramter to the function instead (e.g. "function check(formId) {")
    var _from = document.getElementById(formId);  // The form could also be referenced by it's index, e.g. document.forms[0]

    for (i=0; i < _from.elements.length; i++) {
        if (_from.elements[i].type=='checkbox' && _from.elements[i].checked && complete < 10) {
            complete++;
            total = total + parseInt(_from.elements[i].value);
        }
     }

     if (complete >= 10) {
         _form.message.value = _form.question1.value;
     }
}