<!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. 如何在MySQL中使用explain查询SQL的执行计划？

    1.什么是MySQL执行计划 要对执行计划有个比较好的理解,需要先对MySQL的基础结构及查询基本原理有简单的了解. MySQL本身的功能架构分为三个部分,分别是 应用层.逻辑层.物理层,不只是MyS ...

  2. CF1019E Raining season

    https://www.luogu.org/problemnew/show/CF1019E 题解 \[ dis=day*a+b \] \[ b=-day*a+dis \] 然后就变成了斜率优化. 考虑 ...

  3. UE4 质心相关

    Add force 始终给质心施加力,即使手动偏移了质心(Center of mass)也不例外. Add force at location local 相对于物体的原始质心位置增加一个偏移值后的位 ...

  4. UE4 Pro Tips（keeps updating）

    Consolidate 功能 :在工程范围内用一种资源替换另外一种或多种资源具体操作:同时在编辑器中选中两个或多个资源,右键>Asset Actions>Replace Reference ...

  5. [CSP-S模拟测试]:string（线段树）

    题目描述 给定一个由小写字母组成的字符串$s$. 有$m$次操作,每次操作给定$3$个参数$l,r,x$. 如果$x=1$,将$s[l]~s[r]$升序排序: 如果$x=0$,将$s[l]~s[r]$ ...

  6. Java数据结构与算法(3):队列

    队列也是一种表,不同的是队列在一端进行插入而在另一端进行删除. 队列模型 队列的基本操作包括入队.出队操作.在表的末端插入元素,在表的开头删除元素,即先进先出(FIFO). 队列的数组实现 对于每一个 ...

  7. php部署调优

    转自Laravel学院,  作者:学院君 最近刚好看到一些php.ini优化问题处理. 很多文章都是把配置全部翻译. (内容翻译太多和流程结构写的不是很清晰,看起来也头大.但是建议全部内容看几遍了解一 ...

  8. Java 中冒泡排序

    package com.nf147.test; public class sort { public static void main(String[] args) { int arr[] = {11 ...

  9. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 三十一、python中urllib和requests包详解

    A.urllibimport urllibimport urllib.requestimport json '''1.loads,dumpsjson.loads():将字符串转化成python的基础数 ...