Question

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

我在这里有一个基本表格：

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

  </textarea>
 </li>

</ul>

您单击“细节”并激活该字段。可以使用输入标记而不是标签标记来完成吗？

示例：

<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"/>

Answer 2

输入标记的属性不存在。出于您的目的，使用内联JavaScript代码和属性已禁用：

<input type="checkbox" id="checkbox1" onclick="if (this.checked){ document.getElementById('textarea1').removeAttribute('disabled');}" />
<textarea id="textarea1" name="textarea1" disabled></textarea>

Answer 3

你可以用小javascript来实现，

<强> HTML

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

<强> JAVASCRIPT

document.getElementById('checker').onchange = function() {
 if(this.checked==true){
  document.getElementById("name2").disabled=false;
  document.getElementById("name2").focus();
 }
 else{
  document.getElementById("name2").disabled=true;
 }
};

希望它会有所帮助

Answer 4

所有其他答案都有效，但这个很简单::

<input type="checkbox" id="checkbox"><label class="checkbox" for="checkbox"> Remember Me!

说明：

<input定义了标记调用。
type="checkbox"定义它是一个复选框。
id="checkbox">将其标识为＆＃34;复选框＆＃34;。
<label class="checkbox"将其归类为＆＃34;复选框＆＃34;。
for="checkbox">调用了ID＆＃34;复选框＆＃34;
Remember Me!复选框旁边的内容。

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

4 个答案: