Access PHP-generated radiobuttons by their name through a variable in Javascript

Question

I create a varying amount of radiobutton-rows with PHP and give them names like 1, 2, 3, etc. So now I have stuff like this in my HTML file:

<input type="radio" name="0" value="on" checked="">
<input type="radio" name="0" value="off" >
<input type="radio" name="0" value="solo" >
<input type="radio" name="1" value="on" checked="">
<input type="radio" name="1" value="off" >
<input type="radio" name="1" value="solo" >
<input type="radio" name="2" value="on" checked="">

etc.

Now I want to check the states of all radiobuttons with Javascript (don't worry, I know the number of radio rows):

for(var i = 0; i < amountOfRadioRows; i++) {
    for( var j = 0; j < 3; j++) {
        if(document.formName.i[j].checked) {
            alert(i+" "+j+" is checked!");
        }
    }
}

But here's my problem: How can I access the individual radiobuttons with a variable?

Additional information: Ultimately, my page should load some values from a CSV file (done), display 3 radiobuttons for each position (done) and calculate and display the average of these numbers, depending on which options the user chose. I'd be happy on any input on this :)

Answer 1

Names in form inputs are good for when you're sending the form to the server, but when you're using them in the client side with javascript you better use ids..

So give each radio a different id, let's say:

<input type="radio" name="0" id="r1" value="on" checked="">
<input type="radio" name="0" id="r2" value="off" >
<input type="radio" name="0" id="r3" value="solo" >
<input type="radio" name="1" id="r4" value="on" checked="">
<input type="radio" name="1" id="r5" value="off" >
<input type="radio" name="1" id="r6" value="solo" >
<input type="radio" name="2" id="r7" value="on" checked="">

And then get the one you need like so:

document.getElementById("r1")

Answer 2

You can use document.getElementsByTagName() to get all your <input> elements, then filter through them to exclude those that aren't of type "radio". The getElementsByTagName() API is also available on container elements (like your <form> ) so you can target the radio buttons more accurately if you like.

The return value from that is a NodeList (or HTMLCollection, depending on the browser) that you can treat mostly like an Array instance.

Answer 3

You can put an ID on the radiobuttons (while generating) then generate the javascript to get them by ID and put them into a variable.

<input type="radio" name="0" value="on" checked="" id="radio1">

.

// in javascript
var radio1 = document.getElementById("radio1");

Answer 4

Try document.formName.elements[i][j] . Maybe it is necessary to typecast: document.formName.elements[i+""][j+""] .

But if possible generate IDs and use document.getElementById() .

Answer 5

Assign a specific ID to a radio button, and you can call it from the javacript, or you can use jQuery

//en jquery:
    $('#radio1).click(function(){
     //do something
    });