js/jQuery实现全选效果


Posted in jQuery onJune 17, 2019

本文实例为大家分享了js/jQuery两种代码实现全选效果的具体代码,供大家参考,具体内容如下

注意点

在获取子选框的时候别加上 全选框的个数了

技巧

找 tbody 下面的input标签 就可以

jq文件夹自己下载即可

思路

var all=my$("j_tb").getElementsByTagName("input");
 // alert(all.length);
 //实现1 点击全选 子选框都得被全选
 
 /**
 * 
 * 点击全选框 判断全选框的checked是否为真 为真 遍历所有子选框 设置所有子选框的checked=true; true不用加""
 *
 * 
 */
 my$("j_cbAll").onclick=function(){
 if(j_cbAll.checked)
 {
 for(var i=0;i<all.length;i++)
 {
 all[i].checked=true;
 } 
 }
 else{
 for(var i=0;i<all.length;i++)
 {
  all[i].checked=false;
 } 
 }
 }
 //实现2 选择所有的子选框 全选框勾选
 var arr=[];
 for(var i=0;i<all.length;i++)
 {
 all[i].onclick=function(){
  //思路过程
  /** 
  * 创建数组
  * 点击每个子选框 
  * 1.数组清零
  * 2.fou循环所有自选框 判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
  * 3.判断新的数组长度是否等于子选框数组长度 是的话 全选框被选中(my$("j_cbAll").checked=true) 否则相反
  */
  arr=[];
 for(var i=0;i<all.length;i++)
  if(all[i].checked)
  {
  arr.push(all[i]);
  } 
  
 
 console.log(arr.length);
 if(arr.length==all.length){
  my$("j_cbAll").checked=true;
 }
 else{
  my$("j_cbAll").checked=false;
 }
 }
 
 }
 
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
 $(function () {
 
 $("#j_cbAll").click(function () {
  //修改下面的哪些checkbox
  $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
 });
 
 $("#j_tb input").click(function () {
 
  if($("#j_tb input:checked").length == $("#j_tb input").length){
  $("#j_cbAll").prop("checked", true)
  }else {
  $("#j_cbAll").prop("checked", false)
  }
 
 });
 
 });
</script>
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }
 
 .wrap {
  width: 300px;
  margin: 100px auto 0;
 }
 
 table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #c0c0c0;
  width: 300px;
 }
 
 th,
 td {
  border: 1px solid #d0d0d0;
  color: #404060;
  padding: 10px;
 }
 
 th {
  background-color: #09c;
  font: bold 16px "微软雅黑";
  color: #fff;
 }
 
 td {
  font: 14px "微软雅黑";
 }
 
 tbody tr {
  background-color: #f0f0f0;
  text-align: center;
 }
 
 tbody tr:hover {
  cursor: pointer;
  background-color: #fafafa;
 }
 </style>
</head>
<body>
<div class="wrap">
 <table>
 <thead>
 <tr>
  <th>
  <input type="checkbox" id="j_cbAll"/>
  </th>
  <th>菜名</th>
  <th>饭店</th>
 </tr>
 </thead>
 <tbody id="j_tb">
 <tr>
  <td>
  <input type="checkbox"/>
  </td>
  <td>红烧肉</td>
  <td>田老师</td>
 </tr>
 <tr>
  <td>
  <input type="checkbox"/>
  </td>
  <td>西红柿鸡蛋</td>
  <td>田老师</td>
 </tr>
 <tr>
  <td>
  <input type="checkbox"/>
  </td>
  <td>红烧狮子头</td>
  <td>田老师</td>
 </tr>
 <tr>
  <td>
  <input type="checkbox"/>
  </td>
  <td>日式肥牛</td>
  <td>田老师</td>
 </tr>
 
 </tbody>
 </table>
</div>

<script type="text/javascript">
 function my$(id)
 {
 return document.getElementById(id);
 }
 
 var all=my$("j_tb").getElementsByTagName("input");
 // alert(all.length);
 //实现1 点击全选 子选框都得被全选
 
 /**
 * 
 * 点击全选框 判断全选框的checked是否为真 为真 遍历所有子选框 设置所有子选框的checked=true; true不用加""
 *
 * 
 */
 my$("j_cbAll").onclick=function(){
 if(j_cbAll.checked)
 {
 for(var i=0;i<all.length;i++)
 {
 all[i].checked=true;
 } 
 }
 else{
 for(var i=0;i<all.length;i++)
 {
  all[i].checked=false;
 } 
 }
 }
 //实现2 选择所有的子选框 全选框勾选
 var arr=[];
 for(var i=0;i<all.length;i++)
 {
 all[i].onclick=function(){
  //思路过程
  /** 
  * 创建数组
  * 点击每个子选框 
  * 1.数组清零
  * 2.fou循环所有自选框 判断是否被选中(all[i].checked) 选中的元素加入新的数组(arr.push(all[i]))里面
  * 3.判断新的数组长度是否等于子选框数组长度 是的话 全选框被选中(my$("j_cbAll").checked=true) 否则相反
  */
  arr=[];
 for(var i=0;i<all.length;i++)
  if(all[i].checked)
  {
  arr.push(all[i]);
  } 
  
 
 console.log(arr.length);
 if(arr.length==all.length){
  my$("j_cbAll").checked=true;
 }
 else{
  my$("j_cbAll").checked=false;
 }
 }
 
 }
 
</script>
<!-- <script src="jquery-1.12.4.js"></script>
<script>
 $(function () {
 
 $("#j_cbAll").click(function () {
  //修改下面的哪些checkbox
  $("#j_tb input").prop("checked", $(this).prop("checked"));//根据自己来判断是否全选与否
 });
 
 $("#j_tb input").click(function () {
 
  if($("#j_tb input:checked").length == $("#j_tb input").length){
  $("#j_cbAll").prop("checked", true)
  }else {
  $("#j_cbAll").prop("checked", false)
  }
 
 });
 
 });
</script>
 -->
</body>
</html>

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

jQuery 相关文章推荐
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery创建折叠式菜单
Jun 15 #jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
You might like
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
angular实现图片懒加载实例代码
2017/06/08 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python实现list由于numpy array的转换
2018/04/04 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
小学教师读书活动总结
2014/07/08 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
民事起诉书范本
2015/05/19 职场文书
决心书格式及范文
2019/06/24 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
Python集合的基础操作
2021/11/01 Python
Java死锁的排查
2022/05/11 Java/Android