Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我希望有更好的方法来做到这一点，例如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>

Answer 2

好的，我找到了答案。好吧，我真正寻找的东西相当于getElementsByName()
我通过一点编码找到了一个。我认为这是一个很好的结果，它适合我。任何人都可以评论补充/更正/改进？

＆＃13;

function GimmeElementsByName(name)
{
  var FinalOutput = [], x = document.getElementsByTagName('input').length, i = 0; //For use later.
  while(x--)
  {
  if (document.getElementsByTagName('input')[x].name == name) //Apply to all inputs that's name is qSomething.
  	{
  	 FinalOutput[i] = document.getElementsByTagName('input')[x]; //Array with all the matching inputs.
  	 i++;
  	}
  }
  return FinalOutput;
}

//For example use
function Hello()
{
  var size = 4;
  while (size--) GimmeElementsByName('q1')[size].disabled = "true";
}

＆＃13;

This is an example use:  

<input type="button" value="Click here" onClick="Hello();">
<br>
<input type="radio" name="q1">
<input type="radio" name="q1">
<input type="radio" name="q1">
<input type="radio" name="q1">
<br>
<input type="radio" name="q2">
<input type="radio" name="q2">
<input type="radio" name="q2">
<input type="radio" name="q2">

＆＃13;

用名称设置所有单选按钮

2 个答案: