title: Hide and Display the div after selecting the radio button
body: <p>I have a form with <code>cheque</code> and <code>cash</code> radio button and cheque radio is default checked. I also set, If the cheque is checked than displaying the input field. If cash is checked then hide the input field.</p>
  
  <p>I check in the inspect elements, Event is working when selecting the cash but input fields are not hiding when cash is selected.</p>
  
  <p>My issue got resolved using Nisarg Shah answer. Now I tried to submit the form but I am getting the value of cheque radio button but I am not getting the value of cash. Getting error<code>Undefined index: mode_of_payment</code></p>
  
  <pre><code>if (isset($_POST['submit'])) {
      $status=$_POST['mode_of_payment'];
      echo $status;
  }
  </code></pre>
  
  <p>would you help me out in this?
  <a href="https://i.stack.imgur.com/0p5Bd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0p5Bd.png" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('label.mode_of_payment').click(function(){
      $('input[type=radio]').attr('checked',null);
      $('label.mode_of_payment').removeClass("checked");
      $(this).prev().attr('checked',"checked");
      $(this).addClass("checked");
  })
   $('#subject_section').change(function() {
      if ($('#display_cheque').attr('checked')) {
          $('#display_cheque_field').hide();
      } else {
          $('#display_cheque_field').show();
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .radio-border{
     border:1px solid #000;
     width: 150px;
     border-radius: 30px;
     text-align: center;
     display: flex;
  
    }
    .radio-width-half{
     width: 75px;
    }
   input[type=radio]
      {
          display: none;
      }
      input[type=radio]:checked + label {
      background-color: #00a2ff;
      border-radius: 30px;
      display: block;
      color: #fff;
  }
      .checked{
        background-color: #00a2ff;
        border-radius: 30px;
        display: block;
        color: #fff;
       }
       label.mode_of_payment {
      display: block;
      padding: 8px;
      transition: all 300ms ;
  }
  #display_cheque_field
  {
   margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;form action="#" method="post" name="subject_section"&gt;
         &lt;div class="radio-border"&gt;
          &lt;div class="radio-width-half"&gt;
           &lt;input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked&gt;
           &lt;label class="mode_of_payment"&gt;Cheque&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="radio-width-half"&gt;
           &lt;input type="radio" name="mode_of_payment" value="0" class="display-none"&gt;
           &lt;label class="mode_of_payment"&gt;Cash&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!--radio border--&gt;
  &lt;div id="display_cheque_field"&gt;
        &lt;input type="text" name="cheque_number" class="form-control"  id="cheque_number" placeholder="Cheque number"&gt;
        &lt;input type="text" name="drawee_bank" class="form-control"  id="drawee_bank" placeholder="Bank"&gt;
  
  &lt;/div&gt;
  
  &lt;input type="submit" name="submit" value="submit"&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>