JavaScriptを使用してテーブルセル内のラジオボタンを更新する

Question

JavaScriptを使用して、大企業が管理するサイトのラジオボタンのチェック済みステータスを更新しようとしています。ここに問題があります。ページには2つの関連するラジオボタンのIDと名前が重複していて、それらは名前のない表の行のセルにあります。私は最初のものを選択したい。助けてくれてありがとう。

以下は以下私が最初にラジオオプションを選択するようにラジオを更新しようとした様々な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> 

です。

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は一意である必要があります。それがあなたの3番目と4番目の例が失敗した理由です。

次のコードでは、IDで親<td>を選択した後、最初の子孫inputを選択し、checkedプロパティを設定します。

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

Answer 2

ここにはJSFiddle Demo:があります。これにより、ラジオタイプの最初の要素を選択することができます。

これを行う1つの方法は、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';を

Answer 3

getElementByIdは、最初に見つかった要素を返します。それを確認したい場合は：document.getElementById('Q1_0200').checked = 'checked';