Question

我在页面上有一个相当长的表单，其中包含各种复选框和文本框。如果勾选了相应的复选框，我希望文本框可用。我几乎让它使用这段代码：

<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) {

Answer 2

只需查看

即可

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

Answer 3

显示的代码没有问题。

这是一个工作示范：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 4

问题解决了！

我对两个元素使用相同的名称：复选框输入和文本框输入（在innerHtml中称为“extrabed”。更改其中一个已修复它。

感谢所有提供帮助的人。

使用Javascript更改HTML代码。不太正常

4 个答案: