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读取cookie方法总结
Oct 31 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
原生JS实现天气预报
Jun 16 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Django框架视图介绍与使用详解
2019/07/18 Python
如何基于python测量代码运行时间
2019/12/25 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
美容院考勤制度
2014/01/30 职场文书
具结保证书
2015/01/17 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
公司管理建议书
2015/09/14 职场文书
高中化学教学反思
2016/02/22 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
500字作文之周记
2019/12/13 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python