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) ...
随机推荐
- ORACLE导入Excel数据
首先建好一个和Excel表字段对应字段的表,然后 select t.* from 表名 t for update; 点击这个锁子,打开它 粘贴,然后 再提交事务即可
- 使用js创建select option
var v_select = document.getElementById("selectA"); var v_option = document.createElement( ...
- [PAT] 1140 Look-and-say Sequence(20 分)
1140 Look-and-say Sequence(20 分)Look-and-say sequence is a sequence of integers as the following: D, ...
- NYOJ 201 作业题
作业题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 小白同学这学期有一门课程叫做<数值计算方法>,这是一门有效使用数字计算机求数学问题近似解的方法与过 ...
- LoadRunner运行中的mmdrv和mdrv
在LoadRunner运行脚本过程中,在任务管理器中我们可以看到有一个或多个名为“mmdrv”的进程在运行,与此同时当我们查看LoadRunner\bin目录下的文件时还会看到一个“mdrv.exe” ...
- hdu多校4
Problem L. Graph Theory Homework 思路:很容易想到一步从 1 走到 n 最优. #include<bits/stdc++.h> #define LL lon ...
- HP自动检查html标签是否闭合
function HtmlClose($body) { $strlen_var = strlen($body); // 不包含 html 标签 if (strpos($body, '<') == ...
- HDU 6462.人类史上最大最好的希望事件-递推 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)
人类史上最大最好的希望事件 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- CF1020B Badge 【模拟链表】
n个点(n<=1000) 接下来n个整数表示ai 第i个数ai表示i到ai有一条边 输出: n个数 表示从第i个点出发,最先被访问两次的点 样例1: 从1 出发,先到达2,2会到达3,3又到达2 ...
- POJ 2253 Frogger【最短路变形/最小生成树的最大权/最小瓶颈树/A到B多条路径中的最小的最长边】
Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Frog who is sit ...