jQuery实现Checkbox中项目开发全选全不选的使用

本文主要是介绍jQuery实现Checkbox中项目开发全选全不选的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery实现Checkbox中项目开发全选全不选的使用

  1 <html>
  2 <head>
  3 <meta charset="utf-8">
  4 <title>Checkbox的练习</title>
  5 <style type="text/css">
  6 *{margin:0px;padding:0px;}
  7 table{width:100%;text-align:center;}    
  8 </style>
  9 
 10 <script src="jquery.js"></script>
 11 <script language="javascript">
 12     $(function(){
 13         //给全选的复选框添加事件
 14         $("#all").click(function(){
 15             // this 全选的复选框
 16             var userids=this.checked;
 17             //获取name=box的复选框 遍历输出复选框
 18             $("input[name=box]").each(function(){
 19                 this.checked=userids;
 20             });
 21         });
 22         
 23         //给name=box的复选框绑定单击事件
 24         $("input[name=box]").click(function(){
 25             //获取选中复选框长度
 26             var length=$("input[name=box]:checked").length;
 27             //未选中的长度
 28             var len=$("input[name=box]").length;
 29             if(length==len){
 30                 $("#all").get(0).checked=true;
 31             }else{
 32                 $("#all").get(0).checked=false;
 33             }
 34         });
 35     });
 36     
 37     
 38 </script>
 39 </head>
 40 <body>
 41     <div>
 42     <form action="" method="post">
 43         <table border="1px">
 44             <tr>
 45                 <th>
 46                 <input type="Checkbox" id="all"/>全选
 47                 </th>
 48                 <th>用户编号</th>
 49                 <th>用户账号</th>
 50                 <th>用户姓名</th>
 51                 <th>用户性别</th>
 52                 <th>用户年龄</th>
 53                 <th>家庭住址</th>
 54             </tr>
 55             <tr>
 56                 <td><input type="Checkbox" name="box"  value="10010"/></td>
 57                 <td>10010</td>
 58                 <td>root</td>
 59                 <td>小别</td>
 60                 <td>男</td>
 61                 <td>22</td>
 62                 <td>河南</td>
 63             </tr>
 64             <tr>
 65                 <td><input type="Checkbox" name="box"  value="10011"/></td>
 66                 <td>10011</td>
 67                 <td>root</td>
 68                 <td>小李</td>
 69                 <td>男</td>
 70                 <td>23</td>
 71                 <td>河南</td>
 72             </tr>
 73             <tr>
 74                 <td><input type="Checkbox" name="box"  value="10012"/></td>
 75                 <td>10012</td>
 76                 <td>root</td>
 77                 <td>小赵</td>
 78                 <td>男</td>
 79                 <td>21</td>
 80                 <td>河南</td>
 81             </tr>
 82             <tr>
 83                 <td><input type="Checkbox" name="box"  value="10013" /></td>
 84                 <td>10013</td>
 85                 <td>root</td>
 86                 <td>小周</td>
 87                 <td>男</td>
 88                 <td>25</td>
 89                 <td>河南</td>
 90             </tr>
 91             <tr>
 92                 <td><input type="Checkbox" name="box"  value="10014" /></td>
 93                 <td>10014</td>
 94                 <td>root</td>
 95                 <td>小吴</td>
 96                 <td>男</td>
 97                 <td>20</td>
 98                 <td>河南</td>
 99             </tr>
100         </table>
101         
102     </form>    
103     </div>
104 </body>
105 </html>

  1 <html>
  2 <head>
  3 <meta charset="utf-8">
  4 <title>Checkbox的练习</title>
  5 <style type="text/css">
  6 *{margin:0px;padding:0px;}
  7 table{width:100%;text-align:center;}
  8     
  9 </style>
 10 <script language="javascript">
 11     function checkAll(obj){
 12         //alert(obj.checked);
 13         //获取name=box的复选框
 14         var userids=document.getElementsByName("box");
 15         //alert(userids.length);
 16         for(var i=0;i<userids.length;i++){
 17             userids[i].checked=obj.checked;
 18         }
 19     }
 20 
 21     function selectAll(){
 22         //获取name=box的复选框
 23         var userids=document.getElementsByName("box");
 24         var count=0;
 25         //遍历所有的复选框
 26         for(var i=0;i<userids.length;i++){
 27             if(userids[i].checked){
 28                 count++;
 29             }
 30         }
 31         //选中复选框的个数==获取复选框的个数 
 32         if(count==userids.length){
 33         //设置id为all复选框选中
 34             document.getElementById("all").checked=true;
 35         }else{
 36         //设置id为all复选框不选中
 37             document.getElementById("all").checked=false;
 38         }
 39         
 40     }
 41 </script>
 42 </head>
 43 <body>
 44     <div>
 45     <form action="" method="post">
 46         <table border="1px">
 47             <tr>
 48                 <th>
 49                 <input type="Checkbox" οnclick="checkAll(this)" id="all"/>全选
 50                 </th>
 51                 <th>用户编号</th>
 52                 <th>用户账号</th>
 53                 <th>用户姓名</th>
 54                 <th>用户性别</th>
 55                 <th>用户年龄</th>
 56                 <th>家庭住址</th>
 57             </tr>
 58             <tr>
 59                 <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10010"/></td>
 60                 <td>10010</td>
 61                 <td>root</td>
 62                 <td>小别</td>
 63                 <td>男</td>
 64                 <td>22</td>
 65                 <td>河南</td>
 66             </tr>
 67             <tr>
 68                 <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10011"/></td>
 69                 <td>10011</td>
 70                 <td>root</td>
 71                 <td>小李</td>
 72                 <td>男</td>
 73                 <td>23</td>
 74                 <td>河南</td>
 75             </tr>
 76             <tr>
 77                 <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10012"/></td>
 78                 <td>10012</td>
 79                 <td>root</td>
 80                 <td>小赵</td>
 81                 <td>男</td>
 82                 <td>21</td>
 83                 <td>河南</td>
 84             </tr>
 85             <tr>
 86                 <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10013" /></td>
 87                 <td>10013</td>
 88                 <td>root</td>
 89                 <td>小周</td>
 90                 <td>男</td>
 91                 <td>25</td>
 92                 <td>河南</td>
 93             </tr>
 94             <tr>
 95                 <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10014" /></td>
 96                 <td>10014</td>
 97                 <td>root</td>
 98                 <td>小吴</td>
 99                 <td>男</td>
100                 <td>20</td>
101                 <td>河南</td>
102             </tr>
103         </table>
104         
105     </form>    
106     </div>
107 </body>
108 </html>

posted @ 2016-09-25 08:58 别先生 阅读( ...) 评论( ...) 编辑 收藏

这篇关于jQuery实现Checkbox中项目开发全选全不选的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1060684

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p