jquery中checkbox使用方法简单实例演示


Posted in Javascript onNovember 24, 2015

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

jquery中checkbox使用方法简单实例演示

引入jquery库
<script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script>
构建HTML

一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,实现复选框checkbox的全选与不选,先建立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").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中checkbox的使用方法有个大概的认识,再通过大量实例熟练掌握checkbox使用方法。

Javascript 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
javascript快速排序算法详解
Sep 17 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 #Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 #Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
You might like
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP教程 变量定义
2009/10/23 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
vue-router项目实战总结篇
2018/02/11 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python程序如何进行保存
2020/07/03 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
软件测试笔试题
2012/10/25 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
办公室副主任职责范本
2014/03/08 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript