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


Posted in Javascript onDecember 18, 2017

首先是页面上:

<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显示状态的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
Vue下的国际化处理方法
Dec 18 #Javascript
webpack多页面开发实践
Dec 18 #Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 #Javascript
switchery按钮的使用方法
Dec 18 #Javascript
three.js实现3D影院的原理的代码分析
Dec 18 #Javascript
JS函数节流和函数防抖问题分析
Dec 18 #Javascript
vue 将页面公用的头部组件化的方法
Dec 18 #Javascript
You might like
PHP函数学习之PHP函数点评
2012/07/05 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP可变函数学习小结
2015/11/29 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
layui表格数据重载
2019/07/27 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
小小聊天室Python代码实现
2016/08/17 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python 如何在字符串中插入变量
2020/08/01 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
运动会广播稿400字
2014/01/25 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
企业务虚会发言材料
2014/10/20 职场文书
法律意见书范文
2015/06/04 职场文书
红白喜事主持词
2015/07/06 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript