表单复选框显示和隐藏功能的方式错误

Question

我有一个基本的表单设置，我希望获得一个显示或隐藏的输入字段，这取决于是否单击了复选框，目前，该字段正在显示，当单击复选框时，它隐藏了我如何翻转它，所以情况正好相反。

$(document).ready(function () {
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
});

.hide
{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="" class="container1">
<div class="form-group">
<label for="top" class="top">Speak to One of Our Experts</label><br>
<input type="text" name="Name" id="Name" placeholder="Name" class="form-control">
</div>
<br>
<div class="checkbox">
<label><input type="checkbox" name="ch_name[2]" value="phone">phone</label>
<label><input type="checkbox" name="ch_name[3]" value="email">email</label><br>
<input type="text" name="ch_for[3]" value="" placeholder="enter details"  class="form-control ch_for">
</div>
<br>
<div class="form-group">
<label for="info" class="info">this will have some text here</label>
</div>
<div class="form-group">
<button type="submit" id="Request-button" class="btn btn-success">REQUEST A CALL BACK</button>
</div>

正如你可以从片段中看到的，当你点击按钮时，输入字段变成了隐藏的

Answer 1

您可以通过以下方式检查复选框是选中还是取消选中。。。

$(document).ready(function () {
$('.checkbox input:checkbox').on('click', function(){
if($(this).is(':checked')){
// logic for box checked
} else {
// logic for box unchecked
}
})

})；