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 06 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery实现容器间的元素拖拽功能
Dec 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
php cookie 登录验证示例代码
2009/03/16 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
农业资源与环境专业自荐信范文
2013/12/30 职场文书
试用期员工考核制度
2014/01/22 职场文书
有关打架的检讨书
2014/01/25 职场文书
怎么写自荐书范文
2014/02/12 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
拾金不昧感谢信
2015/01/21 职场文书
护士实习自荐信
2015/03/06 职场文书
建国大业观后感800字
2015/06/01 职场文书
亮剑精神观后感
2015/06/05 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs