Question

我有一个由一些输入类型组成的表单。当未选中复选框时，我希望所有其他输入类型消失，并在选中复选框时重新出现。请问我帮忙吗？这是我的代码：

  <form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>

Answer 1

$(function(){

$('input[name=vehicle]').on('change', function(){

if(this.checked){
  $('#sample').find('input').not(this).hide();
}
  else{
  $('#sample').find('input').not(this).show();
}

})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>

Answer 2

不确定是否还要隐藏标签，提交按钮，所以我隐藏了所有内容。

如果不是，您可以添加过滤器以将其排除。

$('input[type="checkbox"]').change(function() {
    var shouldHide = !$(this).is(':checked');
    // Hide all except
    $(this).siblings('label, input').toggle(shouldHide);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
  <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
<input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" /><br>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /><br>

<label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
<input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
  <input type='submit' name='Submit' value='Submit' />

</form>

Answer 3

只需隐藏包含所有文本字段和标签的div，请参阅以下代码：

 <form id='sample' action='sample.php' method='post'>
 <div id="tests">
 <input type='hidden' name='submitted' id='submitted' value='1'/><br>
 <label for='name' >Your Full Name*: </label>
 <input type='text' name='name' id='name' maxlength="50" /><br>
 <label for='email' >Email Address*:</label>
 <input type='text' name='email' id='email' maxlength="50" /><br>

 <label for='username' >UserName*:</label>
 <input type='text' name='username' id='username' maxlength="50" /><br>

 <label for='password' >Password*:</label>
 <input type='password' name='password' id='password' maxlength="50" /><br>
       </div>
 <input type="checkbox" onclick="test()" id="seeCheck"> Hide all!<br>
 <input type='submit' name='Submit' value='Submit' />

</form> 

<script>
    function test(){
       if (document.getElementById('seeCheck').checked) {

        document.getElementById("tests").style.display = 'none';
      } else {
        document.getElementById("tests").style.display = 'block';
    }
    }
</script>

下面是工作代码：

http://jsfiddle.net/mgqptmt8/11/

希望这有帮助。

Answer 4

使用toggle()方法。

$('input[name=vehicle]').on('change', function(){
  $('#sample input[type=text], input[type=password]').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='sample' action='sample.php' method='post'>
   <input type='hidden' name='submitted' id='submitted' value='1'/><br>
   <label for='name' >Your Full Name*: </label>
   <input type='text' name='name' id='name' maxlength="50" /><br>
   <label for='email' >Email Address*:</label>
   <input type='text' name='email' id='email' maxlength="50" /><br>
   <label for='username' >UserName*:</label>
   <input type='text' name='username' id='username' maxlength="50" /><br>
   <label for='password' >Password*:</label>
   <input type='password' name='password' id='password' maxlength="50" /><br>
   
   <input type="checkbox" name="vehicle" value="Bike"> Hide all!<br>
   <input type='submit' name='Submit' value='Submit' />
</form>

选中复选框时隐藏给定的输入类型

4 个答案: