javascript - 如何在取消选中复选框时隐藏div

Question

我有一个复选框，当复选框点击它会显示一个 div，如果未选中 div 必须隐藏，我试过这段代码但它不能正常工作，选中它显示 div 但它没有隐藏

代码:

<div style="clear:both;" class="tab">
                    <input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /> Schedule Campaign
                    <div  id="datediv" class="red boxs"   style="display: none">
                    <!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
                    <label>Select date & time to schedule</label></br>
                    <input type="text" id="scheduledatetime" name="scheduledatetime"/><label id="schedule_error" class="error"> </label>
                    <!--<input type="text" id="datepickerad"/>-->
                </div>  
                </div>

和JS代码:

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

    });

Answer 1

$('#schedulecheck').click(function () {
    $(".red").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="clear:both;" class="tab">
  <input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" />Schedule Campaign
  <div id="datediv" class="red boxs" style="display:none" >
    <!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
    <label>Select date & time to schedule</label>
    </br>
    <input type="text" id="scheduledatetime" name="scheduledatetime" />
    <label id="schedule_error" class="error"></label>
    <!--<input type="text" id="datepickerad"/>-->
  </div>