Question

我有一个问题。当取消选中复选框时，我只想在下面的给定代码中显示全名。当选中它时，它应该显示表单中给出的所有输入类型。下面我的代码有点反转。当检查时，它会隐藏，当取消选中时，所有内容都会显示出来。请问你帮我这个吗？我的代码是

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

Answer 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>

有意义。

取消选中复选框时隐藏特定输入类型

1 个答案: