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) ...
随机推荐
- mongodb循环
var rds = db.REGIPATIENTREC.find({mzh:{$lt:"0"},usrOrg:"石景山中西医结合医院"}); var show ...
- A Tutorial on Network Embeddings
A Tutorial on Network Embeddings paper:https://arxiv.org/abs/1808.02590 NE 的中心思想就是找到一种映射函数,该函数将网络中 ...
- Math.random易于记忆理解
产生随机数 Math.random*(Max-Min)+Min
- Django_admin源码流程
admin.py from django.contrib import admin from . import models """ 通过原生的django admin来 ...
- poj 3404&&poj1700(贪心)
Bridge over a rough river Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4143 Accept ...
- Find Minimum in Rotated Sorted Array I&&II——二分查找的变形
Find Minimum in Rotated Sorted Array I Suppose a sorted array is rotated at some pivot unknown to yo ...
- PHP读取文件夹的文件列表
/** * getDir()取文件夹列表,getFile()取对应文件夹下面的文件列表,二者的区别在于判断有没有“.”后缀的文件,其他都一样 */ //获取文件目录列表,该方法返回数组 functio ...
- 处理form表单提交后返回值的处理办法【html5】
同事朋友ajax,最近在弄公司业务电话机,自主搭建,买的设备. 其中最主要功能是前端发起呼叫,通过浏览器触发设备进行呼叫功能,走后台呼叫还不行. 需求是这样的: 前端给设备ip发送特定的一段xml信息 ...
- react native 手势响应
参考地址:https://www.jianshu.com/p/935e5c6a5064 官方文档地址:https://facebook.github.io/react-native/docs/panr ...
- 一个纠结的Linux定时任务
昨天写了一个Linux定时任务,搞了半天才是搞好,现在分享下我犯得错误 首先在Linux根目录下创建一个目录 mkdir cat_crazy 进去创建一个shell脚本test.sh,内容是: #!/ ...