Panel toggleDown 仅选中复选框。 Javascript/jQuery

【问题标题】：Panel toggleDown only the checkbox checked. Javascript/jQueryPanel toggleDown 仅选中复选框。 Javascript/jQuery
【发布时间】：2018-12-12 10:32:21
【问题描述】：

我想创建仅在选中复选框后才能向下和向后滑动的 slideToggle 面板。如果未选中该复选框，则 slideToggle 不必工作并给我一个警报

面板打不开！

但我无法将其连接起来。

$("#header").click(function(){
  $("#panel").slideToggle("slow");
});
$("chckbox").click(function(){
  alert("The panel can not be opened!")
});

#header, #panel{
  padding: 5px;
  height: 20px;
  text-align: center;
  width: 100%;
  border:1px solid grey;
}
#panel{
  height: 80px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<caption for="chckbox">(On/Off)</caption>
<input type="checkbox" id="chckbox">
<div id="header">Panel</div>
<div id="panel"></div>

【问题讨论】：

标签： javascript jquery checkbox slidetoggle

【解决方案1】：

您需要在点击#header 时使用checked 属性检查复选框的状态

$("#header").click(function(){
  if ($("#chckbox")[0].checked)
    $("#panel").slideToggle("slow");
  else
    alert("The panel can not be opened!")
});

$("#header").click(function(){
  if ($("#chckbox")[0].checked)
    $("#panel").slideToggle("slow");
  else
    console.log("The panel can not be opened!")
});

#header, #panel{
  padding: 5px;
  height: 20px;
  text-align: center;
  width: 100%;
  border:1px solid grey;
}
#panel{
  height: 80px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<caption for="chckbox">(On/Off)</caption>
<input type="checkbox" id="chckbox">
<div id="header">Panel</div>
<div id="panel"></div>

【讨论】：

没有。如果复选框选中我可以切换面板。未选中复选框以切换面板。
@rzdavid 更新
谢谢。这就是我需要的。