javascript check radio buttons automatically

Question

I wanna check radio buttons automatically: I tried this code but it does not work: Radio buttons have 3 different values, I wanna select the radio button with value 'clean".

How can I check automatically radio buttons on a webpage? Thanks!

function getElements()
  {

  for (i=0; i<document.getElementsByTagName('input').length; i++) 
  {
    //if (document.getElementsByTagName('input')[i].type == 'radio')
    if(document.getElementsByTagName('input')[i].type=='radio')
    {
        //if (document.getElementsByTagName('input')[i].value=='clean')
        document.getElementsByTagName('input')[i].click();
    }
  }

I modified the code as following:

 for (i=0; i<document.getElementsByTagName('input').length; i++) 
  {

    if(document.getElementsByTagName('input')[i].type=='radio')
    {


        if(document.getElementsByTagName('input')[i].value == "clean")
        {
        document.getElementsByTagName('input')[i].checked =true;
        }

    }
  }

but it is not still working:(

the radio buttons are in a iframe, can it be the reason why the code is not working?

Answer 1

Give your radio buttons "names" would make things a lot easier

<input type="radio" name="myradios" value="clean"/>
<input type="radio" name="myradios" value="somethingelse"/>

var elements = document.getElementsByName('myradios');
for (i=0;i<elements.length;i++) {
  if(elements[i].value == "clean") {
    elements[i].checked = true;
  }
}

Working example : http://jsfiddle.net/Dwzc9/

Updated

getElementsByName doesn't seem to be supported in all IE versions ... so you could use the following based on your original example :

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

Working example : http://jsfiddle.net/Dwzc9/2/

Answer 2

you might try setting the "checked" attribute instead.

var getElements = function()
{
    var x = document.getElementsByTagName("input");
    var oldname = '';

    for(var i = 0; i < x.length; i++)
    {
        if(x[i].type == 'radio' && x[i].name != oldname && x[i].value == 'clean')
        {
            x[i].checked = true;
            oldname = x[i].name;
        }
    }
};

The problem with this function is that it will attempt to check all the radio buttons, so if they belong to a group (which is usually the case), only the last radio button from each group will be selected. If that is your intention, then great, otherwise it bears thinking about how to decide which button is selected, and breaking the loop. You can see in the function above that I have decided to select only the first button in the group, by checking the name attribute of the element.

I hope this helps you!

• Matt

UPDATE

Another way to handle this, using jQuery, would be:

var getElements = function(){
  var oldname = '';
  $.each($('input[type="radio"]'), function(){
     if($(this).attr('name') != oldname && $(this).val() == 'clean'){
        $(this).checked = true;
        oldname = this.name;
     }
  });
};