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操作css样式
May 15 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
MySQL授权问题总结
2007/05/06 PHP
php文档更新介绍
2011/07/22 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
C语言如何决定使用那种整数类型
2016/11/26 面试题
英语专业学生个人求职信
2014/01/28 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
音乐学专业求职信
2014/07/22 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python