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（坏！）。

进一步单击会切换复选框，但对文本框中的值没有影响。

我做错了什么？

4

4 回答 4

0

显示的代码没有问题。

这是一个工作演示：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 的问题，具体取决于您的页面）
于 2012-07-18T11:56:50.260 回答
0

只需检查

if(document.roomnew.extrabed.checked){
}
else
{ 
}
于 2012-07-18T11:54:23.247 回答
0

问题解决了！

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

感谢所有提供帮助的人。

于 2012-07-18T13:24:24.183 回答
0

使用此代码进行检查：

if(document.roomnew.extrabed.checked) {
于 2012-07-18T11:51:22.723 回答