Question

我有一个将数据发布到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;

Answer 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。

Answer 2

大概输入是一种形式，所以你可以在复选框上放置一个点击监听器，根据是否检查文本输入是否可见：

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

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

仅在选中另一个复选框时才显示文本输入字段

2 个答案: