jQuery实现全选、反选和不选功能


Posted in jQuery onAugust 16, 2017

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者。

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

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);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
You might like
PHP 全角转半角实现代码
2010/05/16 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python 异常处理实例详解
2014/03/12 Python
Python socket编程实例详解
2015/05/27 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python如何使用字符打印照片
2020/01/03 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年小学开学寄语
2015/02/27 职场文书
摘录式读书笔记
2015/07/01 职场文书
《实心球》教学反思
2016/02/23 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android