首先是页面上：
<p class="row cl"> <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动：</label> <p class="formcontrols col-xs-8 col-sm-9 skin-minimal"> <p class="check-box"> <input type="checkbox" value="1" id="ishaveactive" > <label for="ishaveactive"> </label> </p> </p> </p> <p id="active" name="active" style="display:none;"> <p class="row cl" > <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>现价：</label> <p 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 </p> </p> <p class="row cl" > <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>活动名：</label> <p 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" > </p> </p> <p class="row cl" > <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>距挂牌价：</label> <p 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 </p> </p> <p class="row cl" > <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>促销活动形式：</label> <p 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" > </p> </p> <p class="row cl" > <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>促销活动优惠幅度：</label> <p 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 </p> </p> </p>
然后是jquery中的实现
jquery(document).ready(function($) { //是否添加活动内容 $(#ishaveactive).change(function(){ var p = $(#active); p.css(display) === none && p.show() || p.hide(); });
相关推荐：
js点击链接切换显示隐藏内容的实现方法
js点击选择文本的方法_javascript技巧
js点击返回跳转到指定页面实现过程_javascript技巧
以上就是js点击复选框变更p显示状态的示例代码的详细内容。