javascript - 设置所有单选按钮的名称

Question

我想选择具有特定名称的所有单选按钮。目前，我这样做:

var points = 0, size = 4;

function checkAnswer(answer, q) {
    if (answer) //If answer's right.
    {
      points += 10;
    } else //If answer's wrong.
    {
      points -= 10;
    }
    document.getElementById("score").innerHTML = "You have " + points + " points."; //Display score
    while (size--) document.getElementsByClassName("test" + q)[size].disabled = "true";
    size = 4;
  }

<h3>Question 1</h3>
<input class="test0" type="radio" name="q1" onClick="checkAnswer(0,0)">Answer
<br>
<input class="test0" type="radio" name="q1" onClick="checkAnswer(0,0)">Answer
<br>
<input class="test0" type="radio" name="q1" onClick="checkAnswer(1,0)">Right Answer
<br>
<input class="test0" type="radio" name="q1" onClick="checkAnswer(0,0)">Answer
<br>
<h3>Question 2</h3>
<input class="test1" type="radio" name="q2" onClick="checkAnswer(0,1)">Answer
<br>
<input class="test1" type="radio" name="q2" onClick="checkAnswer(1,1)">Right Answer
<br>
<input class="test1" type="radio" name="q2" onClick="checkAnswer(0,1)">Answer
<br>
<input class="test1" type="radio" name="q2" onClick="checkAnswer(0,1)">Answer
<br>

<p id="score">No score yet!</p>

我想要一个更好的方法来做到这一点，例如 getElementsByName 的某种方法，但不使用该函数(因为它基本上不受支持)。我想我可以使用属性来做到这一点，但我不知道该怎么做。请帮助我，谢谢。
另外，我不喜欢使用 jQuery。

Answer 1

使用 querySelectorAll()并通过关闭 name 属性来提供正确的 CSS 选择器。 getRadsByName()函数将找到所有 <input>具有 name 的标签属性设置为提供给函数的值。您可以根据需要定制查询。

// Wait for domready
document.addEventListener("DOMContentLoaded", function(docE) {

  // Name of our inputs
  var answerRadioNames = ["first", "second"];

  // Function to find all inputs with a certain name
  function getRadsByName(name) {
    var qs = "input[name='" + name + "']";
    var rad = document.querySelectorAll(qs);
    return rad;
  }

  // Function to have all found inputs initialize thier handles
  function radNameInitializer(name) {
    [].forEach.call(getRadsByName(name), radInitializer);
  }

  // Function to attach click handlers to inputs
  function radInitializer(currRad) {
    currRad.addEventListener("click", radClickHandler);
  }

  // Click hanlder which calls the disabler
  function radClickHandler(e) {
    [].forEach.call(getRadsByName(e.target.name), disabler);
  }

  // Function which disables the clicked radio
  function disabler(radToDisable) {
    radToDisable.disabled = true;
  }

  // Attach to all the names
  answerRadioNames.forEach(radNameInitializer);
});

<ul>
  <li>
    <input type="radio" name="first" value="1" />
  </li>
  <li>
    <input type="radio" name="first" value="2" />
  </li>
  <li>
    <input type="radio" name="first" value="3" />
  </li>
  <li>
    <input type="radio" name="second" value="3" />
  </li>
  <li>
    <input type="radio" name="second" value="4" />
  </li>
  <li>
    <input type="radio" name="second" value="5" />
  </li>
</ul>