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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
使用jquery实现轮播图效果
Jan 02 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 神盾解密工具 ”
2014/06/20 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python 数据的清理行为实例详解
2017/07/12 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
服务中心夜班服务员岗位职责
2013/11/27 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
国庆放假通知怎么写
2015/07/30 职场文书