仅当检查另一个复选框时，仅显示文本输入字段答案

【问题标题】：Display a text input field only if another checkbox is checked仅当检查另一个复选框时，仅显示文本输入字段
【发布时间】：2011-10-07 10:45:15
【问题描述】：

我有一个将数据发布到 proccess.php 文件的表单。在表单中，我正在验证输入。有一个复选框询问是否使用双人自行车。我希望它仅在选中该框时才显示文本输入字段。这是我对该部分的表单代码：

<tr>
  <td>
    <span style="font-weight:bold">Tandem:</span>
  </td>
  <td valign="middle">
    <input type="checkbox" name="tandem">&nbsp;
    <input style="visibility:hidden" type="text" name="partnerid" id="partnerid">
  </td>
</tr>

基本上如果复选框“tandem”被选中，设置文本输入字段“partnerid”visibility:visible;

【问题讨论】：

标签： javascript forms validation

【解决方案1】：

我建议使用此代码。当输入元素的disabled 属性为true 时，无法编辑该元素。用户通常会指示不应使用输入字段。

<input type="checkbox" name="tandem" onchange="this.form.partnerid.disabled=!this.checked" />

代码说明：

onchange=".." 在复选框的值更改时触发。这可以通过单击或使用键盘来实现。 点击事件不足以达到此目的。
this.form 从表单元素的事件侦听器的上下文中引用表单
然后可以通过this.form.element_name 或this.form["element_name"] 访问所有命名的表单元素。
选中复选框时 (checked==true)，不应禁用输入 (disabled=false)。这是通过使用协商完成的：this.form.partnerid.disabled = !this.checked。

【讨论】：

感谢您的出色回答。我希望它只改变可见性。谢谢
在 IE 中的 change 事件在复选框失去焦点之前不会触发，因此使用鼠标检查不会使输入可见，直到焦点转移。大部分浏览器在使用键盘勾选复选框时都会触发点击事件，例如 Safari、Firefox 和 IE。
如果我要启用两个输入，我该怎么做？
@treblaluch 重复该语句两次...？

【解决方案2】：

大概输入是在一个表单中，所以你可以在复选框上放置一个点击监听器，根据它是否被选中来使文本输入可见：

  <input type="checkbox" name="tandem" onclick="
    this.form.partnerid.style.visibility = this.checked? 'visible' : 'hidden';
  ">

使用更改事件似乎合乎逻辑，但在 IE 中直到复选框失去焦点才会触发，这有点违反直觉，所以使用点击。

【讨论】：