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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
潜说js对象和数组
May 25 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python读取word文本操作详解
2018/01/22 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
交心谈心活动总结
2015/05/11 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
施工安全责任协议书
2016/03/23 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android