Question

如何使用javascript为每个问题选择答案？例如，获取所有q1，q2等等。

我试过了：

    document.getElementById(formResults)[input = "q1"]

但似乎不起作用。

以下是代码：

     <form id="formResult">
      <h1>Q1) According to the old proverb all roads lead to which capital city</h1>
      <input type="radio" name="q1" value="a" id="q1a"> London <br />
      <input type="radio" name="q1" value="b" id="q1b"> Rome <br />
      <input type="radio" name="q1" value="c" id="q1c"> New York <br />


      <h1>Q2) The name of which football club is an anagram of `Red Admiral`?</h1>
      <input type="radio" name="q2" value="a" id="q2a"> Red Devils <br />
      <input type="radio" name="q2" value="b" id="q2b"> Real Madrid <br />
      <input type="radio" name="q2" value="c" id="q2c"> Roma <br />


      <h1>Q3) In what year was Google launched on the web?</h1>
      <input type="radio" name="q3" value="a" id="q3a"> 1998 <br />
      <input type="radio" name="q3" value="b" id="q3b"> 1995 <br />
      <input type="radio" name="q3" value="c" id="q3c"> 2001 <br />


      <h1>Q4) In computing what is Ram short for?</h1>
      <input type="radio" name="q4" value="a" id="q4a"> Random Access Memory <br />
      <input type="radio" name="q4" value="b" id="q4b"> Real Access Memory <br />
      <input type="radio" name="q4" value="c" id="q4c"> Rough Access Memory <br />


      <h1>Q5) What does HTML stand for?</h1>
      <input type="radio" name="q5" value="a" id="q5a"> Hyperlinks and Text Markup Language <br />
      <input type="radio" name="q5" value="b" id="q5b"> Home Tool Markup Language <br />
      <input type="radio" name="q5" value="c" id="q5c"> Hyper Text Markup Language <br />


      <input type="submit" value= "Check answers">


    </form>

提前致谢

Answer 1

您可以使用getElementsByName查找具有特定名称的所有单选按钮：

document.getElementById('formResult').getElementsByName('q1')

您也可以使用document.querySelectorAll

document.querySelectorAll('#formResult [name=q1]');

Answer 2

您可以使用纯JavaScript进行检查。

＆＃13;

(function() {
  function testAnswers() {
    var arr = ["q1", "q2", "q3", "q4", "q5"];
    for (var i = 0; i < arr.length; i++) {
      var radios = document.getElementsByName(arr[i]);
      for (var y = 0; y < radios.length; y++) {
        if (radios[y].checked) {
          console.log("Option " + arr[i] + " answer is " + radios[y].value);
        }
      }
    }
  }

  var btnCheck = document.getElementById('btnCheck');
  btnCheck.addEventListener('click', function() {
    testAnswers();
  }, false);
})();

＆＃13;

<form id="formResult">
  <h1>Q1) According to the old proverb all roads lead to which capital city</h1>
  <input type="radio" name="q1" value="a" id="q1a">London
  <br />
  <input type="radio" name="q1" value="b" id="q1b">Rome
  <br />
  <input type="radio" name="q1" value="c" id="q1c">New York
  <br />


  <h1>Q2) The name of which football club is an anagram of `Red Admiral`?</h1>
  <input type="radio" name="q2" value="a" id="q2a">Red Devils
  <br />
  <input type="radio" name="q2" value="b" id="q2b">Real Madrid
  <br />
  <input type="radio" name="q2" value="c" id="q2c">Roma
  <br />


  <h1>Q3) In what year was Google launched on the web?</h1>
  <input type="radio" name="q3" value="a" id="q3a">1998
  <br />
  <input type="radio" name="q3" value="b" id="q3b">1995
  <br />
  <input type="radio" name="q3" value="c" id="q3c">2001
  <br />


  <h1>Q4) In computing what is Ram short for?</h1>
  <input type="radio" name="q4" value="a" id="q4a">Random Access Memory
  <br />
  <input type="radio" name="q4" value="b" id="q4b">Real Access Memory
  <br />
  <input type="radio" name="q4" value="c" id="q4c">Rough Access Memory
  <br />


  <h1>Q5) What does HTML stand for?</h1>
  <input type="radio" name="q5" value="a" id="q5a">Hyperlinks and Text Markup Language
  <br />
  <input type="radio" name="q5" value="b" id="q5b">Home Tool Markup Language
  <br />
  <input type="radio" name="q5" value="c" id="q5c">Hyper Text Markup Language
  <br />


  <input id="btnCheck" type="button" value="Check answers">
</form>

＆＃13;

在为每个问题选择答案后检查您的控制台。

Answer 3

根据您需要的浏览器支持类型，一个选项是：

document.querySelectorAll('input[name="q1"]')

Answer 4

这取决于你想要的向后兼容性。在现代浏览器中，您可以使用：

document.querySelectorAll('input[name^=q]:checked')

获取名称以＆＃34; q＆＃34;开头的输入的静态集合并检查。如果需要回退（并且如果要支持IE，这是一个好主意），您可以使用更简单的选择器并循环：

var inputs = document.querySelectorAll('input');

但在这种情况下你也可以使用 getElementsByTagName ：

var inputs = document.getElementsByTagName('input');
for (var i=0, iLen=inputs.length; i<iLen; i++) {
  var el = inputs[i];
  if (/^q/.test(el.name) && el.checked) {
    // do something with el.value
    console.log(el.name + ':' + el.value);
  }
}

可以在任何浏览器中使用，回到IE 5左右。要支持旧版浏览器，如果你有 forEach 的ES5 polyfill，你可以这样做：

Array.prototype.call(document.getElementsByTagName('input'), function(el) {
  if (/^q/.test(el.name) && el.checked) {
    // do something with el.value
    console.log(el.name + ':' + el.value);
  }
});

或类似于 map ， reduce ， filter ，无论什么都适合。

您还可以使用元素集合遍历表单中的所有控件：

var formElements = document.forms.formResult.elements;

给你。： - ）

Answer 5

https://jsfiddle.net/ahmadasjad/fs38f3wu/1/

CheckValue = function(evt){

var formObj = document.getElementById('formResult');
//console.log(formObj);
var myForm = document.getElementById("myForm");
//Extract Each Element Value
for (var i = 0; i < formObj.elements.length; i++) {
    console.log(formObj.elements[i].value);
}

//Extract only selected value. 
for (i = 0; i < formObj.length; i++) {
    if (formObj[i].checked) {
        console.log(formObj[i].value);
    }
}
return false;
}

这只是一个例子。我不知道你需要什么，何时以及如何实际需要。根据您的需要定制

在javascript中选择输入

5 个答案: