Javascript javascript自动检查单选按钮

javascript check radio buttons automatically

提问by Val Nolav

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".

我想自动检查单选按钮：我试过这段代码但它不起作用：单选按钮有 3 个不同的值，我想选择值为“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?

单选按钮在 iframe 中，这可能是代码不起作用的原因吗？

回答by Manse

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/

工作示例：http: //jsfiddle.net/Dwzc9/

Updated

更新

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

getElementsByName似乎并非所有 IE 版本都支持...因此您可以根据原始示例使用以下内容：

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/

工作示例：http: //jsfiddle.net/Dwzc9/2/

回答by Matt

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.

此函数的问题在于它会尝试检查所有单选按钮，因此如果它们属于一个组（通常是这种情况），则只会选择每个组中的最后一个单选按钮。如果这是您的意图，那就太好了，否则就需要考虑如何决定选择哪个按钮并打破循环。您可以在上面的函数中看到，通过检查元素的 name 属性，我决定只选择组中的第一个按钮。

I hope this helps you!

我希望这可以帮助你！

• Matt

• 马特

UPDATE

更新

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

使用 jQuery 处理此问题的另一种方法是：

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