优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子:
1 源代码: h5
// 全选框
<input type="checkbox" class="cb_All">
//单选框
<input type="checkbox" class="cb_One">
2 js代码: 逻辑还是很简单的 : 巧妙利用了"prop" 属性达到了判断的效果
//全选框勾选, 单选框全选
$('.cb_All').click(function () {
$('.cb_One').prop('checked', $('.cb_All').prop('checked'));
var che_nums = $('.cb_One:checked').length;
$('.cb_check').text(che_nums);
}) // 单选框勾选, 判断是否全选
$('.cb_One').click(function () {
$('.cb_All').prop('checked', $('.cb_One').length == $('.cb_One:checked').length); var che_nums = $('.cb_One:checked').length;
$('.cb_check').text(che_nums);
})
// 单选 判断多选
优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo的更多相关文章
- 优秀前端工程师必备: cookie的增删改查Demo!
1 cookie可以很好地解决微信浏览器登录状态的保存,具体教程看下面链接: https://www.cnblogs.com/autoXingJY/p/10456767.html 2 参考了w3c等的 ...
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- DataTable添加checkbox实现表格数据全选,单选(点选)
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...
- 优秀前端工程师必备:" checkbox & radio--单钩 & 多钩 "大比较:你是♂||♀ , 还是 ♂&♀
1 单选: type="radio" 需求: 男女input只能选择一个 <input type="radio" name="sex" ...
- 优秀前端工程师必备: 我要一个新窗口: js开新窗的2种姿势
1.<a href="https://www.cnblogs.com/" title="博客园">当前页面打开博客园</a> js代码等 ...
- 优秀前端工程师必备: (总结) 清除原生ios按钮样式
写移动端的web开发时, 需要清除IOS本身的各种样式: 1.消除ios按钮原生样式, 给按钮加自定义样式: input[type="button"], input[type=&q ...
- sublime text3 --前端工程师必备神器
sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
- sublime text3 --前端工程师必备
sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
- 【PS切图】前端工程师必备,但又无需精通的一项技能。
前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认 ...
随机推荐
- hibernate 异常
1.异常:org.hibernate.AnnotationException: No identifier specified for entity异常. entity类是必须要主键的,否则就会报出这 ...
- 基于OpenGL编写一个简易的2D渲染框架-09 重构渲染器-Shader
Shader 只是进行一些简单的封装,主要功能: 1.编译着色程序 2.绑定 Uniform 数据 3.根据着色程序的顶点属性传递顶点数据到 GPU 着色程序的编译 GLuint Shader::cr ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
- 正则表达式(Swift)
课题 使用正则表达式匹配字符串 使用正则表达式 "\d{3}-(\d{4})-\d{2}" 匹配字符串 "123-4567-89" 返回匹配结果:'" ...
- Manta
安装python客户端: pip install manta import manta as pymanta# cat ${MANTA_PRIVATE_KEY_PATH} | tr '\n' '#' ...
- Containerpilot 配置文件示例
{ consul: "localhost:8500", logging: { level: "INFO", format: "default" ...
- docker 操作
docker daemon 设置代理 http_proxy=109.105.4.17:8118 & systemctl start docker centos: Edit /etc/sysco ...
- CentOS7系列搭建Openvpn
环境:CentOS Linux release 7.3.1611 (Core) 查看os版本命令:[root@openvpn ~]# cat /etc/redhat-release 命令记录如下: y ...
- 可能空字符串转换为浮点型或者整数型:java.lang.NumberFormatException: For input string: " "
Integer.valueOf(str.equals("")?"0":str)
- Required String parameter ' ' is not present
Required String parameter ' ' is not present 报错原因: url中的参数错误. 解决方法: 1.修正url中的参数的值. 2.在Controller层中的@ ...