javascript - Javascript で HTML コードを変更します。十分に機能していない

Question

さまざまなチェックボックスとテキスト ボックスを含むページにかなり長いフォームがあります。対応するチェックボックスにチェックが入っている場合に、テキスト ボックスを使用できるようにするポイントが 1 つあります。私はほとんどこのコードで動作しています:

<tr class= "formspace">
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td>
<td colspan="2"><input name="extrabed" type="checkbox" value="1" onChange="jsextrabed()"><?php echo $lang["extraadultx"]." ".$lang["notsingleoccx"];?>   
<div id="extrabednumber"></div>
<script type="text/javascript">
function jsextrabed() {
if(document.roomnew.extrabed.checked == 1) {
document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">';
}else{
document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">';
}
}
</script>
</td>
</tr>

ページが最初に開いたときは、チェックボックスのみが表示されます。

チェックボックスをオンにすると、テキスト ボックスが値 1 で開きます。

もう一度クリックすると、チェックボックスがオフになり、テキスト ボックスの値が 0 に変わります。それでも問題ありません。

もう一度クリックすると、チェックボックスがチェックされます (良い) が、テキスト ボックスの値は 0 のままです (悪い!)。

さらにクリックすると、チェックボックスが切り替わりますが、テキスト ボックスの値には影響しません。

私は何を間違えましたか？

Answer 1

確認してください

if(document.roomnew.extrabed.checked){
}
else
{ 
}

Answer 2

表示されたコードに問題はありません。

これが実際のデモンストレーションです：http：//jsfiddle.net/dystroy/u6mtW/

HTML：

<tr class= "formspace">
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td>
<td colspan="2"><input name="extrabed" id=checkextra type="checkbox" value="1" >some php   
<div id="extrabednumber"></div>
</td>
</tr>​

Javascript：

<script>
    window.onload=function(){
        document.getElementById('checkextra').onchange = function() {
            if(this.checked) {
                 document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">'; 
            }else{
                 document.getElementById("extrabednumber").innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">';
            }
        }​;
    };
</script>

にいくつか変更を加えました

• DOM全体がないという事実に適応します。あなたの問題は、私たちが見ない部分にあるかもしれません。
• 関数がチェックボックスに正しくフックされていることを確認します（ページによっては、DOMが完全にロードされないという問題が発生する可能性があります）

Answer 3

問題が解決しました！

チェックボックス入力とテキストボックス入力の両方に同じ名前を使用していました（innerHtmlでは「extrabed」と呼ばれていました。そのうちの1つを変更すると修正されました。

助けてくれた皆さんに感謝します。

Answer 4

チェックには次のコードを使用します。

if(document.roomnew.extrabed.checked) {