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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jquery实现拖拽小方块效果
Dec 10 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中函数的形参与实参的问题说明
2010/09/01 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
python能否java成为主流语言吗
2020/06/22 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python如何在bool函数中取值
2020/09/21 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
自荐信范文
2013/12/10 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
企业贷款委托书格式
2014/09/12 职场文书
复兴之路观后感
2015/06/02 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript