JS实现点击复选框变更DIV显示状态的示例代码
时间:2019-04-11
本文章向大家介绍JS实现点击复选框变更DIV显示状态的示例代码,主要包括JS实现点击复选框变更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 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显示状态的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 项目本机部署过程中的若个问题
- Android View体系(十一)自定义ViewGroup
- Java并发编程(四)Java内存模型
- Android View体系(十)自定义组合控件
- 算法(一)时间复杂度
- Android Studio详细安装流程和配置、主题
- html5 jqueryrotate插件实现旋转动画
- 为什么要使用String
- Android网络编程(十一)源码解析Retrofit
- android Material Design详解
- android EventBus详解(三)
- Android绘制优化(一)绘制性能分析
- android EventBus详解(二)
- [置顶] android EventBus详解(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 字典一些常见的魔法方法以及遇到的面试题
- 【程序源代码】python贪吃蛇小游戏
- html5+CSS3+JS实现七夕言情功能代码
- 利用 Python 爬取了近 3000 条单身女生的数据,究竟她们理想的择偶标准是什么?
- 用了这么多年的注解,你知道注解是干嘛的嘛?
- 缓存及在 Python 中使用缓存
- 【xss-labs】xss-labs通关笔记(一)
- 在 jQuery Mobile 中使用 UI 组件
- 【内网渗透】关于内网代理转发技术
- 知识图谱项目前端可视化图论库——Cytoscape.js简介
- Matlab系列之文件操作
- 云开发 X 涂鸦:当小程序遇见物联网IoT,几行代码搞定智能插座控制
- Spring、SpringMVC和SpringBoot看这一篇就够了!
- React结合Redux实现Todolist
- JS事件,你真的懂吗(捕获,冒泡)?