• 案例演示

  • 源代码
<!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;

    }

    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>

 var cksAll=document.getElementById('j_cbAll');

  var cks = document.getElementById('j_tb').getElementsByTagName("input");

  cksAll.onclick=function() {

    for (var i = 0; i < cks.length; i++) {

      cks[i].checked=this.checked;

    }

  };

  for(var i=0;i<cks.length;i++){

    cks[i].onclick=function(){

     var flag=true;

     for(var j=0;j<cks.length;j++){

      if(!cks[j].checked){

        flag=false;

        break;

      }

     }

     cksAll.checked=flag;

    };

  }

</script>

</body>

</html>

全选和不全选》.html

 
  • 具体实现 

  • 思想方法：

//全选：点击全选按钮，其他的小按钮都选中，说明小按钮的状态是跟着全选按钮而变化的

//不全选：小按钮有一个没选择，全选不选中

  • 核心代码

      //获取全选按钮
      var cksAll=my$("j_cbAll");
     //获取其他小按钮
    
  var cks = my$("j_tb").getElementsByTagName("input");
     //实现点击全选按钮，小按钮的状态跟着全选按钮变化
    
  cksAll.onclick=function() {
    
    for (var i = 0; i < cks.length; i++) {
    
      cks[i].checked=this.checked;

    }
    
  };
    

    //遍历每一个小按钮
    
  for(var i=0;i<cks.length;i++){
        //为每一个按钮注册点击事件
    
    cks[i].onclick=function(){
        //开始默认全都选中
    
     var flag=true;
    
     for(var j=0;j<cks.length;j++){
         //循环过程中如果有一个小按钮没被选中，就将flag=false,并且此时不需要继续遍历了
    
      if(!cks[j].checked){
    
        flag=false;
    
        break;
    
      }
    
     }
        //全选按钮状态和flag相同
    
     cksAll.checked=flag;
    
    };
    
  }

原生JS实现全选和不全选的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. 原生JS实现全选，反选

    无样式,比较丑 <!DOCTYPE html><html><head><meta charset="UTF-8"><title ...

  3. js实现CheckBox全选或者不全选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...

  4. jQuery给CheckBox全选与不全选

    $(function(){ $("#checkAll").click(function() {//全选 $('input[name="DATA"]').prop ...

  5. jquery全选或不全选时，不操作已经禁用的checkbox

    $("#selectAll").click(function(){ if(this.checked ){ $(":checkbox[name='equid']" ...

  6. jquery 取消全选和全选功能 不全选

    代码如下 function ckSelectAll() { if ($('#ckSelectAll').is(':checked') == true) { $("INPUT[name='ch ...

  7. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  8. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  9. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

随机推荐

  1. 自定义 ASP.NET Identity Data Model with EF

    One of the first issues you will likely encounter when getting started with ASP.NET Identity centers ...

  2. 人工智能将继续壮大，两会委员建议增加“AI+教育”支持板块

    导读 今年上海两会期间,上海市政协委员.上海交通大学机械与动力工程学院教授范秀敏提交提案,建议政府在推进上海人工智能专项建设中,增加“AI+教育”专项支持板块,并鼓励集聚发展AI产业的各个区,在人工智 ...

  3. mysql 测试php连接问题

    <?php$servername = "shuhua.dbhost";$username = "shuhua_user";$password = &quo ...

  4. puppet一个完整的实例

    一个具体实例来简单说明puppet的具体结构 创建第一个配置 puppet的组成清单这主要包含这几个部分 资源,文件,模板,节点,类,定义 puppet中有个模块的定义,这个比较重要,基本是puppe ...

  5. BZOJ5475 WC2019数树（prufer+容斥原理+树形dp+多项式exp）

    因为一大堆式子实在懒得写题解了.首先用prufer推出CF917D用到的结论,然后具体见前言不搭后语的注释. #include<iostream> #include<cstdio&g ...

  6. python第三方库 - dateutil

    简介 扩展并增强 datetime 模块的功能.支持 Python 2.3+. 官方文档 : http://labix.org/python-dateutil 安装 两种方法: easy_instal ...

  7. 洛谷P1462通往奥格瑞玛的道路题解

    [题目]: https://www.luogu.org/problemnew/show/P1462 题意 题目是给定了一张双向边,有边权的图,然后让我们求出一个最小值,满足一条路径上的最大的费用小于这 ...

  8. Linux的Shell练习--个人笔记

    一. 实验准备(预防抄袭,此步必做) 1. 请将提示符设为:学号加波浪号.输入PS1=学号~,如PS1=110015~, 回车执行 2. 如发现提示符.学号不匹配, 视为抄袭或无效 二. 实验项目 1 ...

  9. 【BZOJ3999】【TJOI2015】旅游 树剖

    题目大意 给你一棵树,有\(n\)个点.有\(q\)个操作,每次要你从\(x\)到\(y\)的路径上选两个点,使得距离\(x\)比较远的点的点权\(-\)距离\(x\)比较近的点的点权最大,然后把这条 ...

  10. 【XSY2484】mex 离散化 线段树

    题目大意 给你一个无限长的数组,初始的时候都为\(0\),有3种操作: 操作\(1\)是把给定区间\([l,r]\)设为\(1\): 操作\(2\)是把给定区间\([l,r]\)设为\(0\): 操作 ...