Checking radio buttons according to an Array

Question

I have an array containing four numbers:

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

I have some radio buttons to select a name:

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

When the radio buttons display I would like the first radio button to be checked i.e. The player John. I know I could simply set autofocus or use jQuery but I want to do it with vanilla Javascript. The idea is that the player names will change dynamically and the player will be selected based on the value in the array i.e. number 3 of the second set of players will be chosen.

Thanks, any help appreciated.

EDIT:

John will be chosen because the first value of the array is 0 and John is the first choice i.e. 0 = 1st choice, 1 = second choice etc

Yes but I want to do this with vanilla JavaScript... unless this makes it too difficult. — Kane, Jan 22 '14 at 08:51
If you just want the first radio button to be checked, try: `document.querySelector('input[name="choice"]').checked = true;` — tewathia, Jan 22 '14 at 08:53
But then when the next set of players are named I want the fourth one chosen because it corresponds to the next value in the array which is 3. Does that make sense? — Kane, Jan 22 '14 at 08:56
Check my demo below: http://stackoverflow.com/questions/21278100/checking-radio-buttons-according-to-an-array/21278447#21278447 — P R, Jan 22 '14 at 09:13

score 3 · Accepted Answer · answered Jan 22 '14 at 09:02

You need to increment/decrement an index value when the Next/Back buttons are clicked, and then set the checked property to true for the radio button with that index.

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

score 0 · Answer 2 · edited May 23 '17 at 12:28

You can try my approach using 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;
    }
}

FYI:

The radio button is grouped under the name check so multiple select is not going to work in your case.
This code will fail in older version of IE and here is the workaround.

P R · Answer 3 · 2014-01-22T09:12:53.087

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

where ChangeSelection(forward) is event to buttons.

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

I don't think you need to manually un-check all the other radio-buttons. Since they all have the same name, only one of them can be checked at a time. — tewathia, Jan 22 '14 at 09:13

score 0 · Answer 4 · answered Jan 22 '14 at 09:07

0

You can do this like this:

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

answered Jan 22 '14 at 09:07

Mehran Hatami

12,723
6
28
35

Checking radio buttons according to an Array

4 Answers4