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

Question

我正在尝试使用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

Answer 1

您不能有重复的ID，并且期望getElementById()可以正常工作。 ID表示“身份”，每个ID必须唯一。 这就是您的第三个和第四个示例失败的原因。

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

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

Answer 2

这是JSFiddle演示： 。 这将允许您选择radio类型的第一个元素。

一种实现方法是使用getElementsByTagName并检查类型radio的首次出现，但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">​

然后从那里可以将所选元素的checked设置为true： myInput[i].checked = true; 或myInput[i].checked = 'checked';

Answer 3

getElementById将返回您找到的第一个元素。 如果要检查它，则需要执行以下操作： document.getElementById('Q1_0200').checked = 'checked';