I have a form set up with an input field that should show or hide depending on whether a checkbox is clicked. Currently, the field is showing and hides when the checkbox is clicked. How can I reverse this behavior so that it works the other way around?
$(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>In the provided snippet, when you click the button, the input field becomes hidden.