CODEWITHSUNDEEP
javascripthtml
Raouf Athar
Raouf Athar

Reputation: 1813

How to check a Particular Radio Box in a "Group" using JavaScript

I have a radio box group and I need to select a given radio box using javascript as in the following case, I have to check option with value D3

<input type="radio" name="day" id="day" value="D1" />D1
<input type="radio" name="day" id="day" value="D2" />D2
<input type="radio" name="day" id="day" value="D3" />D3
<input type="radio" name="day" id="day" value="D4" />D4

How can the third option for example be checked?

Upvotes: 1

Views: 1032

Answers (5)

Tibor Udvari
Tibor Udvari

Reputation: 3012

I would give the radio buttons different ids and then do the following : 

d3.select("input#thirdRadio").property("checked", "true");

Upvotes: 0

arvind.gravity
arvind.gravity

Reputation: 166

function selectRadio(toBeSelectedRadioIndex)
{
    var radioElements = document.getElementById('day');
    radioElements[toBeSelectedRadioIndex].checked = true;
}

In many cases you need to have Id names different for your elements. You can then give them same name and use getElementsByTagName instead. The the code will look like...

function selectRadio(toBeSelectedRadioIndex)
{
    var radioElements = document.getElementsByTagName('day');
    radioElements[toBeSelectedRadioIndex].checked = true;
}

Upvotes: 0

Nick Beranek
Nick Beranek

Reputation: 2761

Remove the unique ID from each of the checkboxes. You should only have ONE unique ID on a page.

In JavaScript, access the third checkbox in this group with the following and set it to checked:

var inputs = document.getElementsByTagName('input');
inputs[2].setAttribute('checked', 'checked');

OR, you can simply add checked=checked to your HTML.

Upvotes: 0

Ofir Baruch
Ofir Baruch

Reputation: 10346

Be sure putting this radio group in a form and change the theNameOfTheForm to your form's name.

<form name="theNameOfTheForm">
..
..
..
</form>

The java-script function:

<script type="text/javascript">

function select_radio_value(theValue)
{
for (var i=0; i < document.theNameOfTheForm.day.length; i++)
   {
   if (document.theNameOfTheForm.day[i].value == theValue)
      {
         document.theNameOfTheForm.day[i].checked = true;
      }
   }
}
</script>

Now you can use it as a js function on any event. for instance:

<input type='button' name='c3' value='Click Here to check the D3 radio' onClick="javascript:select_radio_value('D3')">

Upvotes: 2

Alejandro B.
Alejandro B.

Reputation: 5102

Normally, you'd use document.getElementById('day').val or jQuery('#day').val(). That is, if they have different ids. If they share the id, I'm not sure you can with document.getElementById since it assumes that the ids are different, but perhaps 

jQuery('#day')[3].val()

could work, because jQuery actually returns an array of elements that match the criteia

Upvotes: 0

Related Questions