javascript自动检查单选按钮

时间:2012-01-06 18:40:22

标签: javascript

我想自动检查单选按钮:我尝试了这段代码,但它不起作用: 单选按钮有3个不同的值,我想选择值为“clean”的单选按钮。

如何自动检查网页上的单选按钮? 谢谢!

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

我将代码修改如下:

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

    }
  }

但它仍然无法运作:(

单选按钮位于iframe中,这可能是代码无效的原因吗?

2 个答案:

答案 0 :(得分:16)

给你的单选按钮“名字”会让事情变得容易

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

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

<强>更新

所有IE版本似乎都不支持

getElementsByName ...因此您可以根据原始示例使用以下内容:

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

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

答案 1 :(得分:3)

您可以尝试设置“已检查”属性。

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

此功能的问题在于它将尝试检查所有单选按钮,因此如果它们属于某个组(通常是这种情况),则只会选择每个组中的最后一个单选按钮。如果这是你的意图,那么很好,否则它会考虑如何决定选择哪个按钮,并打破循环。您可以在上面的函数中看到,我决定只选择组中的第一个按钮,方法是检查元素的name属性。

我希望这可以帮到你!

  • 马特

更新

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