1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
})

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态

$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});

上述代码中遍历了选项列表,然后改变checked属性,调用函数allchk()是干什么的,别急,留在后面介绍。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');//转换为逗号隔开的字符串
alert(vals);
});

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

//设置全选复选框
$("#list :checkbox").click(function(){
allchk();
});

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("#all").prop("checked",true);
}else{//不全选
$("#all").prop("checked",false);
}
}

总结

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

$(function () {
//全选或全不选
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").prop("checked", true);
}else{
$("#list :checkbox").prop("checked", false);
}
});
//全选
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});
//全不选
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});
//反选
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
}); //设置全选复选框
$("#list :checkbox").click(function(){
allchk();
}); //获取选中选项的值
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
});
function allchk(){
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("#all").prop("checked",true);
}else{//不全选
$("#all").prop("checked",false);
}
}

 获取选中的条数

$("table :checkbox:checked").size()==0

  

jq 全选、反选、判断选中的条数的更多相关文章

  1. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  2. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. checkbox的全选,取消全选,获得选中值

    <html> <head> <title>jq全选以及获得选中项的值</title> <meta charset="utf-8" ...

  4. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  5. JQ 全选设定与设置选中

    复选数据框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. ----Juquery复选框全选反选及获取选中值Value

    --获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...

  7. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  8. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

  9. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

随机推荐

  1. GTX 750等低配显卡如何玩转Deepfakes?

    这里说的Deepfakes软件还是DeepFaceLab,人工智能换脸,是使用深度学习方法来实现的.而深度学习程序对电脑配置要求是非常高的,尤其是跑模型这个环节.很多低配电脑,根本就跑步起来.比如像G ...

  2. python中的内建函数

    本文用作记录python中的内建函数及其功能,本文内容随时补充. 完整的内建函数及其说明参考官方文档:    https://docs.python.org/3.5/library/functions ...

  3. List删除元素

    在单线程环境下的解决办法 public void remove() { if (lastRet == -1) throw new IllegalStateException(); checkForCo ...

  4. 线段树:HDU2795-Billboard(建树方式比较新奇)

    Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  5. ACM-ICPC 2018 徐州赛区网络预赛 H. Ryuji doesn't want to study

    262144K   Ryuji is not a good student, and he doesn't want to study. But there are n books he should ...

  6. SmartGit 30天评估期结束解决办法

    smartgit 需要输入序列号解决办法: 1.找到路径: %APPDATA%\syntevo\SmartGit\<main-smartgit-version> 然后删除: setting ...

  7. 笔记-python-centos环境下安装配置

    笔记-python-centos环境下安装配置 1.      准备工作 环境准备 centos6.5 mini,已有python 2.6.6 下载源码包 Python官网下载Gzipped sour ...

  8. luogu2951 noip2017 小凯的疑惑

    在考场上我们可以打表发现规律是 $ ab-a-b $ .下面给出证明(看的网上的). 若有正数 $ x $ 不能被 $ a $ , $ b $ 组合出,假设 $ a>b $ ,则存在 \[ x= ...

  9. set的特性和基本用法——python3.6

    特性 无序,不重复的数据组合,用{}表示,eg:{1,2,3,4,5,6} 用途 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之间的交集,差集,并集,对称差集,包含(子集和超集,相交 ...

  10. $.each 用break 好像不太灵啊

    for(var i=0;i<obj.length;i++) {                                       if (i < 5) {             ...