CODEWITHSUNDEEP
javascripthtml
Gunaseelan
Gunaseelan

Reputation: 2542

Select anyone of the radio button in a radio group using Javascript

I am a beginner in terms of Javascript.

There are lot of similar questions in Stackoverflow. But none of that solve my this small example.

I like to select a particular radio button by default using only javascript.

I tried this below simple example in my localhost. But it didn't work. It is selecting the last radio button

<html>
  <head>
    <title>JS Test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  </head>
  <body>
        <div></div>
        <div>
            <form name="myform" action="">
                <label for="name">Name</label>
                    <input type="text" name="name"></input>
                <br>
                    <label for="radio_value">Select Position</label>
                    <input type="radio" name="radio_value" value="First">First</input>
                    <input type="radio" name="radio_value" value="Second">Second</input>
                    <input type="radio" name="radio_value" value="Third">Third</input>
                    <input type="radio" name="radio_value" value="Fourth">Fourth</input>
                    <input type="radio" name="radio_value" value="Fifth">Fifth</input>
                <br>
                    <input type="submit" name="form_submit" value="Submit"></input>
            </form>
        </div>
        <script type="text/javascript">
            var rates = document.getElementsByName('radio_value');
            var rate_value;
            for(var i = 0; i < rates.length; i++){
                document.getElementsByName('radio_value')[i].checked=true;
            }
    </script>
  </body>
</html>

Check out the JSFIDDLE Sorry friends, I can't add id to each radio button.

Upvotes: 1

Views: 152

Answers (4)

locoMotion
locoMotion

Reputation: 372

getElementsByName gives you an array of matching elements. Access a particular element via its index in the DOM, which should be the same as its index in the array. The code in your example iterates through each element in the array, checking it and simultaneously unchecking the previously checked element(this is the behavior of a radio button group).

Upvotes: 1

Gunaseelan
Gunaseelan

Reputation: 2542

I found a way to solve it.

document.getElementsByName('radio_value')[1].checked=true;

My updated JS FIDDLE

Upvotes: 1

nitishagar
nitishagar

Reputation: 9403

you can use: document.getElementById("First") and set the checked to true.

document.getElementById("First").checked = true;

[Updated] Try something like:

var radios = document.getElementsByTagName('input');
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio') radios[i].checked = true;
}

Upvotes: 4

jmore009
jmore009

Reputation: 12923

you can do this is very simply with jquery:

$("#First").attr('checked', 'checked');

FIDDLE

UPDATE

Then go with nash_ag's vanilla javascript, which is the simplest way to do this:

document.getElementById("First").checked = true;

NEW FIDDLE

Upvotes: 2

Related Questions