JS实现点击复选框变更DIV显示状态的示例代码

首先是页面上：

 <div class=\"row cl\">
    <label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>是否存在促销活动：</label>
<div class=\"formControls col-xs-8 col-sm-9 skin-minimal\">
<div class=\"check-box\">
<input type=\"checkbox\" value=\"1\" id=\"isHaveActive\" >
<label for=\"isHaveActive\"> </label>
</div>
</div>
</div>
  
  <div id=\"active\" name=\"active\" style=\"display:none;\">
  <div class=\"row cl\" >
<label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>现价：</label>
<div class=\"formControls col-xs-8 col-sm-9\">
<input type=\"number\" step=\"0.01\" class=\"input-text\" value=\"${priceChange.price}\" placeholder=\"\" id=\"price\" name=\"price\" >
元/L
</div>
</div>   
  
  <div class=\"row cl\" >
<label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>活动名：</label>
<div class=\"formControls col-xs-8 col-sm-9\">
<input type=\"text\" class=\"input-text\" value=\"${priceChange.active_name}\" placeholder=\"\" id=\"active_name\" name=\"active_name\" >
</div>
</div>   
 <div class=\"row cl\" >
<label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>距挂牌价：</label>
<div class=\"formControls col-xs-8 col-sm-9\">
<input type=\"number\" step=\"0.01\" class=\"input-text\" value=\"${priceChange.gap_guapai}\" placeholder=\"\" id=\"gap_guapai\" name=\"gap_guapai\" >
元/L
</div>
</div>    
  
  <div class=\"row cl\" >
<label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>促销活动形式：</label>
<div class=\"formControls col-xs-8 col-sm-9\">
<input type=\"text\" class=\"input-text\" value=\"${priceChange.activity_form}\" placeholder=\"\" id=\"activity_form\" name=\"activity_form\" >
</div>
</div> 
  <div class=\"row cl\" >
<label class=\"form-label col-xs-4 col-sm-3\" style=\"width: 20%\"><span class=\"c-red\">*</span>促销活动优惠幅度：</label>
<div class=\"formControls col-xs-8 col-sm-9\">
<input type=\"number\" step=\"0.01\" class=\"input-text\" value=\"${priceChange.activity_gap}\" placeholder=\"\" id=\"activity_gap\" name=\"activity_gap\" >
元/L
</div>
</div>   
</div>
  
  

然后是jquery中的实现

jQuery(document).ready(function($) { 
 
//是否添加活动内容 
 
$(\"#isHaveActive\").change(function(){  
 
   var div = $(\"#active\");  
   div.css(\"display\") === \"none\" && div.show() || div.hide(); 
 
 }); 

以上这篇JS实现点击复选框变更DIV显示状态的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。