优秀前端工程师必备: 非常常用的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,图层(默认 ...
随机推荐
- Mysql canal 监控数据变化
https://www.jianshu.com/p/6299048fad66 阿里巴巴github地址 https://github.com/alibaba/canal/wiki/QuickStart
- ubuntu编译安装php7, 安装openssl
sudo apt-get install openssl sudo apt-get install libssl-dev
- ABAP-动态程序生成
科技越来越进步,人也就变的越来越懒,最终的演变就是大脑发达,四肢退化...AI的到来,准备接招吧... 报表若没有过多的用户交互逻辑,一般可通过SQ01配置生成,本文介绍用ABAP方式实现报表程序的动 ...
- DOM对象模型
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- Swift - JPush极光推送的使用3(根据Alias别名,给某个指定用户发推送)(转)
一.别名(alias)介绍 (1)我们可以给每一个安装了应用程序的用户,取不同别名来标识(比如可以使用用户账号的 userid 来作为别名). (2)以后给某个特定用户推送消息时,就可以用此别名来指定 ...
- Python基础杂点
Black Hat Python Python Programming for Hackers and Pentesters by Justin Seitz December 2014, 192 p ...
- Haskell语言学习笔记(63)Dicidable
Dicidable class Divisible f => Decidable f where lose :: (a -> Void) -> f a choose :: (a -& ...
- session会话管理,与过滤器使用,访问控制
1 用户登录,是否注册用户,在登录处理页面进行用户验证,创建session保存用户名和密码 2否,进入用户注册页面 3是,系统保存该用户的登录信息 4进入要访问的页面 5用户直接访问某个页面, 6系统 ...
- SpringBoot配置文件YML 注意事项
YML读取注意事项 使用YML时遇到的坑: 最近在做项目时,遇到了一些在读取YML配置时发生的问题,在这里写一并写下来,希望给自己以及大家一个提示,能尽量避免在读取配置文件时发生这些错误,给开发带来不 ...