使用JavaScript更新表格单元格中的单选按钮

时间:2011-04-14 17:17:09

标签: javascript radio-button

我正在尝试使用JavaScript来更新由大公司管理的网站上的单选按钮的已检查状态。这是问题 - 页面具有两个相关单选按钮的重复ID和名称,它们位于未命名表的行的单元格中。我想选择第一个。谢谢你的帮助。

以下是基本的html

<table cellspacing='0' cellpadding='0' border='0'>
    <tr>
        <td>
            <img alt='spacer' src='../Images/blank.gif' width='10' height='1' border='0' />
        </td>
        <td id='A-Q1_0200-1' valign='top'>
            <font size='-1'>
                <input type='radio' name='Q1_0200' id='Q1_0200' value='1' onclick='FormChanged()'
                class='bodyInput' />
            </font>
        </td>
        <td colspan='1' valign='top' id='A-Q1_0200-1-T'>
            <font size='-1'>
                &nbsp;Yes
            </font>
        </td>
        <td>
            <font size='-1'>
                &nbsp;
            </font>
        </td>
        <td id='A-Q1_0200-2' valign='top'>
            <font size='-1'>
                <input type='radio' name='Q1_0200' id='Q1_0200' value='2' checked='checked' onclick='FormChanged()'
                class='bodyInput' />
            </font>
        </td>
        <td colspan='1' valign='top' id='A-Q1_0200-2-T'>
            <font size='-1'>
                &nbsp;No
            </font>
        </td>
    </tr>
</table>

以下是我尝试更新收音机以选择第一个收音机选项的各种javascript示例。

    document.getElementById('A-Q1_0200-1').Q1_0201.checked='checked'; 

    document.getElementById('A-Q1_0200-1').radio[0].checked=TRUE;

    document.getElementById('Q1_0200').checked=TRUE

    document.getElementById('Q1_0200').checked=’TRUE

3 个答案:

答案 0 :(得分:0)

您不能拥有重复的ID并希望getElementById()能够正常运行。 ID表示“身份”,每个ID都必须是唯一的。这就是你的第3和第4个例子失败的原因。

以下代码将按其ID选择父<td>,然后选择第一个后代input并设置checked属性。

document.getElementById('A-Q1_0200-1').getElementsByTagName("input")[0].checked = "checked";

答案 1 :(得分:0)

这是JSFiddle Demo:。这将允许您选择无线电类型的第一个元素。

一种方法是使用getElementsByTagName并检查第一次出现的无线电类型,但ID应该是唯一的。好像它不受你的控制:

var myInput = document.getElementsByTagName('input');

for(var i=0; i<myInput.length; i++){
    if(myInput[i].type == 'radio'){
         console.log(myInput[i]);
         break;
    }
}

console.log会为您提供以下元素:

<input type=​"radio" name=​"Q1_0200" id=​"Q1_0200" value=​"1" onclick=​"FormChanged()​" class=​"bodyInput">​

从那里开始,您可以将选中的元素设置为true:myInput[i].checked = true;myInput[i].checked = 'checked';

答案 2 :(得分:0)

getElementById将返回第一个找到的元素。如果你想检查它,你需要做:document.getElementById('Q1_0200').checked = 'checked';