未选中复选框时隐藏特定的输入类型答案

【问题标题】：Hide specific input types when checkbox is unchecked未选中复选框时隐藏特定的输入类型
【发布时间】：2015-09-28 09:08:53
【问题描述】：

我有一个问题。未选中Checkbox时，我只想在下面的给定代码中显示全名。检查它应该显示表单中给出的所有输入类型。下面我的代码有点反转。选中时，它隐藏，未选中时，全部显示。你能帮我解决这个问题吗？我的代码是

<html>
<body>
<head>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<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="cb" value="cb"> Hide all!<br>
<input type='submit' name='Submit' value='Submit' />

</form>


<script>
$(function(){

$('input[name=vehicle]').on('change', function(){

if(this.checked){
 $('#sample').find('input').not(this).hide();
   }
  else{
  $('#sample').find('input').not(this).show();
}

})

})





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

</body>
</html>

【问题讨论】：

标签： jquery checkbox input textfield show-hide

【解决方案1】：

您可以将您的监听器更改为：

$('input[type="checkbox"]').change(function(){
    $(this).siblings('label').not(':first').toggle();
    $(this).siblings('input[type=text], input[type=password]').not(':first').toggle()
 }).change();

并将您的复选框标签更改为

<input type="checkbox" name="cb" value="cb"> Show all!<br>

说得通。

【讨论】：