1. <ul id="list">
  2. <li><label><input type="checkbox" value="1">text</label></li>
  3. <li><label><input type="checkbox" value="2">text</label></li>
  4. <li><label><input type="checkbox" value="3">text</label></li>
  5. <li><label><input type="checkbox" value="4">text</label></li>
  6. <li><label><input type="checkbox" value="5">text</label></li>
  7. <li><label><input type="checkbox" value="6">text</label></li>
  8. </ul>
  9. <input type="checkbox" id="all">
  10. <input type="button" value="全选" class="btn" id="selectAll">
  11. <input type="button" value="全不选" class="btn" id="unSelect">
  12. <input type="button" value="反选" class="btn" id="reverse">
  13. <input type="button" value="获得选中的所有值" class="btn" id="getValue">

  jquery代码

  1. $(function () {
  2. //全选或全不选
  3. $("#all").click(function(){
  4. if(this.checked){
  5. $("#list :checkbox").prop("checked", true);
  6. }else{
  7. $("#list :checkbox").prop("checked", false);
  8. }
  9. });
  10. //全选
  11. $("#selectAll").click(function () {
  12. $("#list :checkbox,#all").prop("checked", true);
  13. });
  14. //全不选
  15. $("#unSelect").click(function () {
  16. $("#list :checkbox,#all").prop("checked", false);
  17. });
  18. //反选
  19. $("#reverse").click(function () {
  20. $("#list :checkbox").each(function () {
  21. $(this).prop("checked", !$(this).prop("checked"));
  22. });
  23. allchk();
  24. });
  25.  
  26. //设置全选复选框
  27. $("#list :checkbox").click(function(){
  28. allchk();
  29. });
  30.  
  31. //获取选中选项的值
  32. $("#getValue").click(function(){
  33. var valArr = new Array;
  34. $("#list :checkbox[checked]").each(function(i){
  35. valArr[i] = $(this).val();
  36. });
  37. var vals = valArr.join(',');
  38. alert(vals);
  39. });
  40. });
  41. function allchk(){
  42. var chknum = $("#list :checkbox").size();//选项总个数
  43. var chk = 0;
  44. $("#list :checkbox").each(function () {
  45. if($(this).prop("checked")==true){
  46. chk++;
  47. }
  48. });
  49. if(chknum==chk){//全选
  50. $("#all").prop("checked",true);
  51. }else{//不全选
  52. $("#all").prop("checked",false);
  53. }
  54. }

  

  1.  

jQuery实现复选框的全选、反选功能的更多相关文章

  1. 【jQuery】复选框的全选、反选,推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  2. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  3. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  4. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  5. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. jQuery_完成复选框的全选与全不选

    别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  9. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  10. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

随机推荐

  1. VALID_FOR in db standby

    检查DG 装填: 目标主机检查mrp是否正常: SELECT PROCESS FROM V$MANAGED_STANDBY WHERE PROCESS LIKE 'MRP%';--若mrp没有启动,则 ...

  2. web.xml中监听器如何顺序加载

    最近用到在Tomcat服务器启动时自动加载数据到缓存,这就需要创建一个自定义的缓存监听器并实现ServletContextListener接口, 并且在此自定义监听器中需要用到Spring的依赖注入功 ...

  3. LeetCode 230 Kth Smallest Element in a BST 二叉搜索树中的第K个元素

    1.非递归解法 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * ...

  4. WebSocket Client连接AspNetCore SignalR Json Hub

    突然有个需求,需要使用普通的websocket客户端去连接SignalR服务器. 因为使用的是.net core 版的signalr,目前对于使用非signalr客户端连接的中文文档几乎为0,在gay ...

  5. C# this索引器

  6. serv-U 7以上版本pasv端口的设置及中文乱码问题

    利用serv-u架设ftp服务器已经是再常见不过了事情了,近日一朋友为图新鲜,弄了个7.4版本的新玩意儿,结果架设上去后,仅开了21端口,用LeapFtp在port模式下连接没问题,但是另一常见的cu ...

  7. Redis中String类型的Value最大可以容纳数据长度

    项目中使用redis存储,key-value方式,在Redis中字符串类型的Value最多可以容纳的数据长度是512M 官方信息: A String value can be at max 512 M ...

  8. DataBinding初探 数据绑定的用法 ,import 集合类型,绑定的表达式,访问集合类型2

    数据绑定的用法 import语法   <data> <import type="android.view.view"/> </data>   如 ...

  9. redhat配置dns服务器bind

    配置Oracle11g的RAC需要使用DNS服务器来解析SCAN IP,本文就是以此为例介绍bind服务器的使用.首先科普一下bind服务器,属于企业级产品了,还是开源的: Bind是Berkeley ...

  10. 转载:Maven实战—Dependencies与DependencyManagement的区别

    致敬作者,支持原创.原文地址:https://www.cnblogs.com/feibazhf/p/7886617.html 在上一个项目中遇到一些Jar包冲突的问题,之后还有很多人分不清楚Depen ...