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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
AngularJS入门之动画
2016/07/27 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解Vue用cmd创建项目
2019/02/12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python装饰器使用实例详解
2019/12/14 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
个人委托书格式
2014/04/04 职场文书
社区志愿者培训方案
2014/06/10 职场文书
报效祖国演讲稿
2014/09/15 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技