Использование JavaScript для обновления переключателя в ячейке таблицы

Question

Я пытаюсь использовать JavaScript для обновления проверенного состояния переключателя на сайте, управляемом крупной компанией. Вот в чем проблема - на странице есть повторяющиеся идентификаторы и имена для двух связанных переключателей, и они находятся в ячейке строки безымянной таблицы. Я хочу выбрать первый. Спасибо за любую помощь.

Ниже приведен основной 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

Вот демоверсия 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">​

и оттуда вы можете установить выбранный элемент проверен на true: myInput[i].checked = true; или myInput[i].checked = 'checked';

Answer 2

getElementById вернет вам первый найденный элемент. И если вы хотите проверить это, вам нужно сделать: document.getElementById('Q1_0200').checked = 'checked';

Answer 3

Вы не можете иметь дубликаты идентификаторов и ожидать, что getElementById() будет работать. Идентификатор означает «идентичность», и каждый идентификатор должен быть уникальным. Вот почему ваши 3-й и 4-й примеры не дали результатов.

Следующий код выберет родительский элемент <td> по его идентификатору, затем выберет первого потомка input и установит свойство checked.

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