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?

yeah, I am aware of that Manse, and your code is awesome but I am struggling in making it work not because your fault but it is mine or lack of my knowledge. I will accept your answer ! — Val Nolav, Jan 06 '12 at 19:14
yeah the problem was iframe and I corrected and everything is working fine on your code Manse Many thanks, you are my man ! — Val Nolav, Jan 06 '12 at 20:06

Manse · Accepted Answer · 2012-01-06T18:52:05.597

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/

Manse your code is working but the problem is iFrame I think. Or something else and because of that I cannot run it successfully. — Val Nolav, Jan 06 '12 at 19:36

Matt · Answer 2 · 2012-01-06T19:01:16.787

3

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;
     }
  });
};

edited Jan 06 '12 at 19:01

answered Jan 06 '12 at 18:50

Matt

1,213
14
39

1

This is going to tick a radio button for every group on the page ? the OP only wants to check them when they have a value of "clean" – Manse Jan 06 '12 at 19:01
It should. The name attribute is how html radio buttons are "grouped." Each button with the same name is in a group. – Matt Jan 06 '12 at 19:03
Now it should work in a meaningful way. Only the first "clean" radio button from each group will be selected. – Matt Jan 06 '12 at 19:07
depends on the browser. I had a problem recently with a jquery plugin that did not work at all within an iframe in IE7. Most of the time, though, I would say javascript should work in an iframe. – Matt Jan 06 '12 at 19:08

javascript check radio buttons automatically

2 Answers2

Linked