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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16305960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:01:50  来源:igfitidea点击:

Activate input field from input checkbox

htmlformsinputlabelfield

提问by Seth Urquhart

I want to activate the input field from checking the checkbox.

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

I have a basic form here:

我在这里有一个基本形式:

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

  </textarea>
 </li>

</ul>

You click on the "Specifics and it activates the field. Can this be done with an input tag instead of a label tag?

您单击“Specifics”并激活该字段。这可以使用输入标签而不是标签标签来完成吗?

Example:

例子:

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

jsfiddle of complete work thus far: http://jsfiddle.net/Sederu/gaZDW/

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

回答by Reid Johnson

You will need a little EMCAScript for that.

为此,您需要一点 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" />

The inline handler sees if the checkbox has been checked, and if it has, focuses the text input. I put the checkbox in the label just to symantically group it with the label as it preforms the same function, but you can put the checkbox anywhere you would like.

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

If you are looking to enable/disable the input field rather than just focus it, you can do like so

如果您希望启用/禁用输入字段,而不仅仅是聚焦它,您可以这样做

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

回答by filipko

The attribute for doesn't exist for input tag. For your purpose, use inline javascript code and attribute disabled:

输入标签的属性不存在。出于您的目的,请使用内联 javascript 代码并禁用属性:

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

回答by Prasanth K C

You can do it with little javascript,

你可以用一点javascript来做,

HTML

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;
 }
};

Hope it will help

希望它会有所帮助

回答by Raticode

All of the other answers work, but this one is simple::

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

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

Explanation:

解释:

  • <inputdefines the tag calling.
  • type="checkbox"defining it is a checkbox.
  • id="checkbox">identifying it as "checkbox".
  • <label class="checkbox"classifying it as "checkbox".
  • for="checkbox">calls that id "checkbox"
  • Remember Me!What it says beside the checkbox.
  • <input定义标签调用。
  • type="checkbox"定义它是一个复选框。
  • id="checkbox">将其标识为“复选框”。
  • <label class="checkbox"将其归类为“复选框”。
  • for="checkbox">称该 ID 为“复选框”
  • Remember Me!复选框旁边的内容。