Question

我有一个复选框，当复选框点击它会显示一个div，如果取消选中div必须隐藏，我已经尝试过这个代码但它没有正常工作，oncheck它显示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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用.change()功能进行收听更改事件。并根据检查值进行显示/隐藏决定，使用.toggle(flag)标志为真/假：

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

Working Demo

Answer 3

这个代码

$('#schedulecheck').on('click',function () {
 if($(this).is(':checked'))
    $(".red").show();
 else
   $(".red").hide();
});

Answer 4

使用此：

$("#schedulecheck").on("click", function () {
    $(".red").toggle($(this).is(":checked"));
});

这是＆＃34;跨浏览器兼容的方式来确定是否选中了复选框＆＃34;正如jQuery重新定义它（有关详细信息，请参阅http://api.jquery.com/prop/#prop1）。

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

4 个答案:

Working Demo