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

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">将其标识为“复选框”。
• <label class="checkbox"将其归类为“复选框”。
• for="checkbox">称该ID为“复选框”
• Remember Me!复选框旁边的内容。