Question

我有一个包含四个数字的数组：

var players = [0,3,4,2];

我有一些单选按钮来选择名称：

<h3 id="question">Which player would you like?</h3>

<input type="radio" name="choice" value="0" id="answ1">
<label for="choice" id="choice_1">John</label>
<br>
<input type="radio" name="choice" value="1" id="answ2">
<label for="choice" id="choice_2">Wayne</label>
<br>
<input type="radio" name="choice" value="2" id="answ3">
<label for="choice" id="choice_3">Steven</label>
<br>
<input type="radio" name="choice" value="3" id="answ4">
<label for="choice" id="choice_4">Jack</label>
<br>
<button id="back">Back</button>
<button id="next">Next</button>

当单选按钮显示时，我想要检查第一个单选按钮，即玩家John。我知道我可以简单地设置autofocus或使用jQuery，但我想用vanilla Javascript来做。这个想法是玩家名称会动态变化，玩家将根据阵列中的值进行选择，即选择第二组玩家的第3名。

谢谢，任何帮助表示赞赏。

编辑：

选择John是因为数组的第一个值是0而John是第一个选择，即0 =第一选择，1 =第二选择等

Answer 1

单击“下一个/后退”按钮时，需要递增/递减索引值，然后将带有该索引的单选按钮的checked属性设置为true。

var players = [0, 3, 4, 2, 1];
var i = 0;
var choices = document.querySelectorAll('input[name="choice"]');
choices[players[i]].checked = true;
document.getElementById('back').onclick = function () {
    if (i > 0) {
        i--;
        choices[players[i]].checked = true;
    }
}
document.getElementById('next').onclick = function () {
    if (i < players.length - 1) {
        i++;
        choices[players[i]].checked = true;
    }
}

DEMO

Answer 2

您可以使用array.indexOf

尝试我的方法

var players = [0, 3, 4, 2];
var ins = document.getElementsByName('choice');
for (var i = 0; i < ins.length; i++) {
    if (players.indexOf(parseInt(ins[i].value, 10)) > -1) {
        ins[i].checked = true;
    }
}

仅供参考：

单选按钮的分组名称为 check ，因此为多个在您的情况下，选择不起作用。
在旧版本的IE和here is the workaround.

Answer 3

        var players = [0,3,1,2];
        var currentPosInArray = 0;
        window.onload = function() {
            ChangeSelectedRadio();
        }

        function ChangeSelectedRadio() {
            var radio = document.querySelectorAll("input[type='radio']");
            var arrItem = players[currentPosInArray];
            for (var i =0; i< radio.length; i++ ){
                radio[i].checked = false;
            }
            if (radio[arrItem]) {
                radio[arrItem].checked = true;
            }
        }

        function ChangeSelection(forward) {
            if (forward) {
                currentPosInArray++;
            }
            else {
                currentPosInArray--;
            }
            if (currentPosInArray < 0) {
                currentPosInArray = players.length -1; //if is in first pos and click "Back" - go to last item in array
            }
            else if (currentPosInArray >= players.length) {
                currentPosInArray = 0; //if is in last position and click "Next" - go to first item in array
            }
            ChangeSelectedRadio();
        }

其中ChangeSelection(forward)是按钮的事件。

DEMO：http://jsfiddle.net/9RWsp/1/

Answer 4

你可以这样做：

var players = [0,3,4,2];
var firstValue = players[0];
var firstInput = document.querySelector("input[type=radio][name=choice][value='"+firstValue+"']");
firstInput.checked = true;

根据阵列检查单选按钮

4 个答案: