CODEWITHSUNDEEP
javascript
Kane
Kane

Reputation: 924

Checking radio buttons according to an Array

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

Upvotes: 2

Views: 3473

Answers (4)

P R
P R

Reputation: 334

        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/

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

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;

Upvotes: 0

Praveen
Praveen

Reputation: 56509

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:

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

Upvotes: 0

tewathia
tewathia

Reputation: 7308

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

Upvotes: 3

Related Questions