Question

我想在用户点击复选框时隐藏/显示文本框。我已经搜索了堆栈溢出，但我没有得到解决方案..

这是我的代码：

<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的复选框，你必须检查是否在以下帮助下检查：check seudo class和display input type display none和display block。

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

Answer 2

请检查

$(function(){
    $('your checkbox id or name').prop(true/false);
    checkBoxOnchange();
});

function checkBoxOnchange() {
    if ($('your checkbox id or name').is(":checked")) {
        $("input[name='email']").show();
        $("input[name='mobile_number']").show();
    } else {
        $("input[name='email']").hide();
        $("input[name='mobile_number']").hide();
    }
}

and in ur checkbox on-change event call checkBoxOnchange()

Answer 3

function check(opt){
 if(opt == 'yes'){
    document.getElementById('email').style.display="";
    document.getElementById('mobile').style.display="";
    document.getElementById("no").checked=false;
 }
 else
 if(opt == 'no'){
     document.getElementById('email').style.display="none";
     document.getElementById('mobile').style.display="none";
     document.getElementById("yes").checked=false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-feedback">
    <input style="display:none;" 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="Name" id="name" name="name" >
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback">
    <input style="display:none;" type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" id="mobile" >
    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
  </div>
  Yes : <input type="checkbox" onclick="check('yes');" id="yes" />
  No : <input type="checkbox" onclick="check('no');" id="no" />

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

3 个答案: