html - 从输入复选框激活输入字段

Question

我想通过选中复选框来激活输入字段。

我这里有一个基本形式:

<ul>
 <li>
  <label id="form-title" for="name3">Specifics:</label>
 <li>   
  <textarea id="name3" name="name3" >

  </textarea>
 </li>

</ul>

您单击“Specifics”，它会激活该字段。这可以用输入标签而不是标签标签来完成吗？

例子:

<ul>
 <li>   
  <input type="checkbox" for="name2">Other...</input>
  <input id="name2" name="name2" />
 </li>
</ul>

jsfiddle 迄今为止完成的工作:http://jsfiddle.net/Sederu/gaZDW/

Answer 1

为此你需要一些 EMCAScript。

<label for="name3">
  <input type="checkbox" id="name3activaitor" onclick="if(this.checked){ document.getElementById('name3').focus();}" />
  Other...
</label>
<input type="text" id="name3" name="name3" />

内联处理程序查看复选框是否已被选中，如果已选中，则聚焦文本输入。我将复选框放在标签中只是为了在语义上将其与标签分组，因为它执行相同的功能，但您可以将复选框放在任何您想要的位置。

如果您希望启用/禁用输入字段而不是仅仅关注它，您可以这样做

        <input type="checkbox" onclick="var input = document.getElementById('name2'); if(this.checked){ input.disabled = false; input.focus();}else{input.disabled=true;}" />Other...
        <input id="name2" name="name2" disabled="disabled"/>