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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
layui table 参数设置方法
Aug 14 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
JS开发自己的类库实例分析
Aug 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
angular 服务随记小结
2019/05/06 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
django框架如何集成celery进行开发
2017/05/24 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
实现Python与STM32通信方式
2019/12/18 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
留学自荐信的技巧
2013/10/17 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
交通安全主题班会
2015/08/12 职场文书
学术会议开幕词
2016/03/03 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技