jQuery实现全选、反选和不选功能的方法详解


Posted in jQuery onDecember 04, 2019

本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考,具体如下:

适用于网页多选后需要进行批量操作的场景(如批量删除等)。如有问题希望大家可以指正。谢谢~~

HTML

我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮

<ul id="list">
  <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
  <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
  <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
  <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
  <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
  <li><label><input type="checkbox" value="6"> 6.喜欢??</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

当然不要忘了先加载jQuery库文件:

jQuery 百度CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

jQuery

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

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

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

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

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

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

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

$("#reverse").click(function () {
  $("#list :checkbox").each(function () {
    $(this).attr("checked", !$(this).attr("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).attr("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全选
    $("#all").attr("checked",true);
  }else{//不全选
    $("#all").attr("checked",false);
  }
}

总结

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

$(function () {
  //全选或全不选
  $("#all").click(function(){
    if(this.checked){
      $("#list :checkbox").attr("checked", true);
    }else{
      $("#list :checkbox").attr("checked", false);
    }
   });
  //全选
  $("#selectAll").click(function () {
     $("#list :checkbox,#all").attr("checked", true);
  });
  //全不选
  $("#unSelect").click(function () {
     $("#list :checkbox,#all").attr("checked", false);
  });
  //反选
  $("#reverse").click(function () {
     $("#list :checkbox").each(function () {
       $(this).attr("checked", !$(this).attr("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).attr("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全选
    $("#all").attr("checked",true);
  }else{//不全选
    $("#all").attr("checked",false);
  }
}

jQuery实现的全选、反选和不选功能 示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示:jQuery实现的全选、反选和不选功能</title>
<style>
.top_title{text-align:center;}
.demo{width:520px; margin:40px auto 0 auto; min-height:250px;}
ul li{line-height:30px; padding:4px 0; font-size:14px}
.btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<script>
$(function () {
  //全选或全不选
  $("#all").click(function(){
    if(this.checked){
      $("#list :checkbox").attr("checked", true);
    }else{
      $("#list :checkbox").attr("checked", false);
    }
   });
  //全选
  $("#selectAll").click(function () {
     $("#list :checkbox,#all").attr("checked", true);
  });
  //全不选
  $("#unSelect").click(function () {
     $("#list :checkbox,#all").attr("checked", false);
  });
  //反选
  $("#reverse").click(function () {
     $("#list :checkbox").each(function () {
       $(this).attr("checked", !$(this).attr("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).attr("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全选
    $("#all").attr("checked",true);
  }else{//不全选
    $("#all").attr("checked",false);
  }
}
</script>
</head>
<body>
<div id="main">
  <h2 class="top_title"><a href="">jQuery实现的全选、反选和不选功能</a></h2>
  <div class="demo">
      <ul id="list">
      <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
      <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
      <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
      <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
      <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
      <li><label><input type="checkbox" value="6"> 6.喜欢??</label></li>
    </ul>
     <input type="checkbox" id="all">
    <input type="button" value="全选" class="btn" id="selectAll">
    <input type="button" value="全不选" class="btn" id="unSelect">
    <input type="button" value="反选" class="btn" id="reverse">
    <input type="button" value="获得选中的所有值" class="btn" id="getValue">
  </div>
</div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现图片放大点击切换
Jun 06 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
js DOM模型操作
2009/12/28 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
自我鉴定范文300字
2013/10/01 职场文书
精彩的广告词
2014/03/19 职场文书
岗位说明书怎么写
2014/07/30 职场文书
学生个人评语大全
2015/01/04 职场文书
长城导游词
2015/01/30 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
幼儿园六一主持词
2015/06/30 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书