面板上的toggleDown仅选中复选框。 Javascript / jQuery

Question

I want to create the slideToggle panel only able to slide down and back after the checkbox checked. If the checkbox not checked the slideToggle does not have to work and give me an alert

The panel can not be opened!

But I can not concatenate that.

 $("#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> 

Answer 1

You need to check status of checkbox using checked property on click on #header

$("#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>