脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现全选效果

js/jQuery实现全选效果

 更新时间：2019年06月17日 14:36:14   作者：vince_26321  
这篇文章主要为大家详细介绍了js/jQuery两种代码实现全选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js模拟C#中List的简单实例

    js模拟C#中List的简单实例

    本篇文章主要是对js模拟C#中List的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • MVVM 双向绑定的实现代码

    MVVM 双向绑定的实现代码

    这篇文章主要介绍了MVVM 双向绑定的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 实现隔行换色效果的两种方式【实用】

    实现隔行换色效果的两种方式【实用】

    本文主要介绍了实现隔行颜色交替 鼠标经过高亮颜色的两种方式的具体实例，有助于理解和使用。方案一：纯CSS编写；方案二：js代码编写。需要的朋友可以参考下
    2016-11-11
  • js模拟微博发布消息

    js模拟微博发布消息

    本文主要介绍了js模拟微博发布消息的实例，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js里取容器大小、定位、距离等属性搜集整理

    js里取容器大小、定位、距离等属性搜集整理

    取容器大小、定位、距离等在实际中使用的比较广泛，下面与大家分享下小编整理的js相关代码，有此需求的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • 微信小程序手机号码验证功能的实例代码

    微信小程序手机号码验证功能的实例代码

    这篇文章主要介绍了微信小程序手机号码验证功能的实例代码及微信小程序正则判断手机号的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • js中获取时间new Date()的全面介绍

    js中获取时间new Date()的全面介绍

    下面小编就为大家带来一篇js中获取时间new Date()的全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 微信小程序实现拼图小游戏

    微信小程序实现拼图小游戏

    这篇文章主要为大家详细介绍了微信小程序实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • js获取当前日期时间及其它操作汇总

    js获取当前日期时间及其它操作汇总

    Js获取当前日期时间及其它操作，还有一些自己常用的方法，很好用，也很全。这里推荐给大家，有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript的setAttribute兼容性问题解决方法

    JavaScript的setAttribute兼容性问题解决方法

    JavaScript的setAttribute存在兼容性问题，下面与大家分享下具体的解决方法，感兴趣的朋友可以参考下
    2013-11-11

最新评论