javascript - 根据复选框显示/隐藏文本框

Question

我想在用户单击复选框时隐藏/显示文本框。我已经在 stack overflow 中搜索过，但我没有得到解决方案..

这是我的代码:

<div class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="Email" id="email" name="email" >
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
  </div>

  <div class="form-group has-feedback">
    <input type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" >
    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
  </div>

我想给一个复选框名称显示联系信息与否。如果用户单击是，我想显示这两个字段。如果用户单击否，我想隐藏这两个字段。

谁能帮帮我？

提前致谢。

Answer 1

您可以通过 jQuery 完成这个简单的任务。假设您有一个 id 为 contact-info 的复选框，您必须在 :checked seudo 类和显示输入类型 display none 和 display block 的帮助下检查是否已选中。

if('#contact-info').is(":checked")){
   $('#email,#mobile').css("display","block");
}else{
   $('#email,#mobile').css("display","none");
 }