title: How to hide a div on unchecking the checkbox
body: <p>I have a checkbox ,when the checkbox clicks it will display a div ,if unchecked the div has to hide,I have tried this code but it is not working properly,oncheck it is showing the div but it's not hiding</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div style="clear:both;" class="tab"&gt;
                      &lt;input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /&gt; Schedule Campaign
                      &lt;div  id="datediv" class="red boxs"   style="display: none"&gt;
                      &lt;!--&lt;label&gt;You can schedule campaigns only after 3 hours from now.&lt;/label&gt;&lt;/br&gt;--&gt;
                      &lt;label&gt;Select date &amp; time to schedule&lt;/label&gt;&lt;/br&gt;
                      &lt;input type="text" id="scheduledatetime" name="scheduledatetime"/&gt;&lt;label id="schedule_error" class="error"&gt; &lt;/label&gt;
                      &lt;!--&lt;input type="text" id="datepickerad"/&gt;--&gt;
                  &lt;/div&gt;  
                  &lt;/div&gt;
  </code></pre>
  
  <p>And the JS code:</p>
  
  <pre><code>$('#schedulecheck').on('ifChecked', function(event){
       // alert();
             if($(this).attr("value")=="red"){
                  $(".red").show();
              }
  
      });
      $('#schedulecheck').on('unChecked', function(event){
        if($(this).attr("value")=="red"){
                  $(".red").hide();
              } 
  
      });
  </code></pre>