jquery一键控制checkbox全选,反选,全不选。
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。
Hml的checkbox没有加name,只用了 div 嵌套。
如有更好的方法,望指点!!
//全选
$('#allChecked').change(function(){
$('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
//反选
$('#invertChecked').change(function(){
if($(this).is(':checked')){
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}
});
//一键控制全选、反选、全不选
$('#orChecked').change(function(){
if($(this).is(':checked')){
var box = $('#box').children(':checkbox');
if(box.length==box.filter(':not(:checked)').length){ // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
$('#box').children(':checkbox').prop('checked',true);
}else{ // 如果有选中个数,-> 反选
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}else{
$('#box').children(':checkbox').prop('checked',false); // 如控制键取消选中,剩余的checkbox也取消选中
} });
<div align="center"> <div id="box">
<input type="checkbox" value="1">西瓜
<input type="checkbox" value="2">芒果
<input type="checkbox" value="3">橙
<input type="checkbox" value="4">山竹
<input type="checkbox" value="5">草莓
<input type="checkbox" value="6">火龙果
</div> <br> <input type="checkbox" id="allChecked">全选
<input type="checkbox" id="invertChecked">反选
<input type="checkbox" id="orChecked">全选/反选/全不选 </div>
如有更好的方法,望指点!!
jquery一键控制checkbox全选,反选,全不选。的更多相关文章
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- checkbook全选/反选/全不选
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- vue实现单选多选反选全选全不选
单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...
- WPF DataGrid CheckBox 多选 反选 全选
效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...
- html js 全选 反选 全不选源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...
随机推荐
- android dialog 筛选列表
1.效果图 2. 布局文件 1)显示筛选的标题 <?xml version="1.0" encoding="utf-8"?> <LinearL ...
- Linux非常用命令
查看系统版本(64位还是32位版本) uname -a 或 more /proc/version 执行结果
- Python Flask 配置文件
1. 什么是配置文件? 就是当程序调用的一些参数,文件路径,方法或者类放到一个文件中, 当下次需要修改的一个参数的时候,不用再从所有关联的程序中找到该参数挨个修改, 比较繁琐.像Django中,程序启 ...
- python语言的模块化
在实际工程中使用的编程语言,都有(也应该有)自己的模块化方式,这是由于:一个文件不可能写的无限长,把不同性质和功能的代码放入不同的文件,再由文件组成不同的文件夹,这种方式符合人们思考和理解的习惯,不过 ...
- html和url两种录制方式
在跟使用Loadrunner工具使用者交流的过程中,经常有人提到这个问题,基于HTML(HyperText Markup Language 超文本置标语言)模式录制 与基于URL(Uniform Re ...
- 设置loadrunner中每个mdrv.exe进程中包含的vuser个数
设置loadrunner中每个mdrv.exe进程中包含的vuser个数 在loadrunner中,默认的是每50个vuser会使用一个mdrv.exe进程,但是有些时候vuser中的使用的线程太多就 ...
- Eclipse IDE下的Spring框架使用简单实例
Eclipse IDE下的Spring框架使用简单实例 1 准备Java jdk安装. Eclipse软件安装.根据系统安装32/64版本,选择Eclipse IDE for Java Develop ...
- cocos2dx三种定时器的使用以及停止schedule,scheduleUpdate,scheduleOnce。
今天白白跟大家分享一下cocos2dx中定时器的使用方法. 首先,什么是定时器呢?或许你有时候会想让某个函数不断的去执行,或许只是执行一次,获取你想让他每隔几秒执行一次,ok,这些都可以统统交给定时器 ...
- 洛谷P2236 HNOI2002 彩票 [暴搜]
题目传送门 彩票 分析: 虽然题目标签上标的是Splay,但我一个蒟蒻至今也沒掌握平衡树,所以就索性一个暴搜,加一点剪枝就水过去了- 代码: #include<cstdio> #inclu ...
- Linux命令之firewall-cmd
firewall-cmd [选项] firewall-cmd是firewalld守护程序的命令行客户端.它提供了管理运行时和永久配置的接口.firewalld中的运行时配置与永久配置分开.这意味着可以 ...