<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>全选示例</title>

     </head>

     <body>

         <input type="checkbox" id="ckBox" onclick="selAllNo()" />全选/全不选

         <br>

         <input type="checkbox" name="hobby" onclick="check()" />篮球

         <br>

         <input type="checkbox" name="hobby" onclick="check()" />足球

         <br>

         <input type="checkbox" name="hobby" onclick="check()" />羽毛球

         <br>

         <input type="checkbox" name="hobby" onclick="check()" />乒乓球

         <br>

         <input type="button" value="全选" onclick="selAll()" />

         <input type="button" value="全不选" onclick="selNo()" />

         <input type="button" value="反选" onclick="deSel()" />

         <script type="text/javascript">

             // 获取全选/全不选复选框

             var ckBox = document.getElementById("ckBox");

             // 获取到要操作的复选框

             var hobbies = document.getElementsByName("hobby");

             // 如果有一个没有选，那么去掉全选/全不选复选框

             function check() {

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

                     // 只要有一个未选中，就设置复选框为未选中，并跳出循环

                     if (!hobbies[i].checked) {

                         ckBox.checked = false;

                         break;

                     } else {

                         // 如果全部都为选中，设置复选框为选中

                         ckBox.checked = true;

                     }

                 }

             }

             // 全选

             function selAll() {

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

                     hobbies[i].checked = true;

                 }

                 ckBox.checked = true;

             }

             // 全不选

             function selNo() {

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

                     hobbies[i].checked = false;

                 }

                 ckBox.checked = false;

             }

             // 全选/全不选

             function selAllNo() {

                 if (ckBox.checked) {

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

                         hobbies[i].checked = true;

                     }

                 } else {

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

                         hobbies[i].checked = false;

                     }

                 }

             }

             // 反选

             function deSel() {

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

                     // 选中的设为未选中，未选中的设为选中

                     hobbies[i].checked = (hobbies[i].checked) ? false : true;

                 }

                 // 检查反选是否有未选中的

                 check();

             }

         </script>

     </body>

 </html>

JavaScript基础6——全选示例的更多相关文章

  1. javascript: checked 不可全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  3. JavaScript实现单击全选 ,再次点击取消全选

                 以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...

  4. html javascript checkbox实现全选功能

    html代码 <input type="checkbox" id="all" />all</input> <input type= ...

  5. JavaScript CheckBox实现全选和部分选择

    <html> <head> <script> function BatchAddToBasket() { var questionNums = ''; var ch ...

  6. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  7. JavaScript案例四：全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  8. JavaScript 全选函数的实现

    Html代码: <table id="purchase-info" class="table table-bordered table-hover table-st ...

  9. javascript 全选与反选

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

随机推荐

  1. TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库

    很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...

  2. Serverless Kubernetes入门：对kubernetes做减法

    背景 Kubernetes作为通用的容器编排系统,承载了广泛的应用和场景,包括CI/CD,数据计算,在线应用,AI等,然而由于其通用性和复杂性,管理一个kubernetes集群对于很多用户而言还是充满 ...

  3. Python3 实现FTP功能

    目录结构: FTP_project/ ├── FTP_client │   ├── ftp_client.py │   └── __init__.py └── FTP_server ├── bin │ ...

  4. mysql INNER JOIN关键字 语法

    mysql INNER JOIN关键字 语法 作用:在表中存在至少一个匹配时,INNER JOIN 关键字返回行.大理石平台维修 语法:SELECT column_name(s) FROM table ...

  5. hdu_1231（最大连续子序列）

    http://acm.hdu.edu.cn/showproblem.php?pid=1231 最长公共子序列: 方法1:暴力枚举所有区间的连续和,维护最大和 复杂度O(n^3)-->因为求区间和 ...

  6. 【CF1252K】Addition Robot（线段树，矩阵乘法）

    题意: 思路:因为线段树上每一段的矩阵之积只有两种,预处理一下,翻转的时候下传tag然后把另一种可能性换上来就好 #include<bits/stdc++.h> using namespa ...

  7. 从源码编译UE4,加快Setup.bat下载文件的环节

    之前很傻,每次运行这个setup.bat都要等很久很久才能把4g多的东西下载完成,知道有一天突然发现了世外桃源…… 从命令行运行setup.bat -help,可以看到参数的说明(没错,参数可选,之前 ...

  8. 报错信息：ORA-00979：不是GROUP BY表达式

    如图所示 参考:https://blog.csdn.net/linan0930/article/details/16508025 解决方案:即select 列表项中不存在的列可以出现在group by ...

  9. 170816-关于Java基础的习题

    1. switch 括号里的可以是 int .char. byte.short.String,还有枚举类型,应用举例 不可以是long.double 2. 调用ma()方法之后,ma()方法将错误类型 ...

  10. nodejs工作大全

    1.修改文件夹中图片的名称 var fs = require('fs');var fileDirectory = "F:\\zdw\\修改文件夹名称\\newFile";var n ...