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

最新推荐文章于 2020-12-19 13:52:54 发布

如果没有_明天

最新推荐文章于 2020-12-19 13:52:54 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011199063/article/details/54173155

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

首先是页面上：

 <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();

  });