чекбокс формы показать и скрыть функцию неправильно

Question

У меня есть базовая настройка формы c, и я хочу, чтобы поле ввода отображалось или скрывалось в зависимости от того, установлен ли флажок, в настоящее время поле отображается, и когда флажок установлен, он скрывает, как мне переверните это так, чтобы было наоборот.

$(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
  }
})

});