<!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. delphi datetimetounix 和 unixtodatetime 全平台（FIREMONKEY）时区修正

    可能平时在转换UNIX时间时没有注意结果,当转换成UNIX时间后,再转换回来对比发现时间和标准时间差了8个小时.网上有相关的修正方法,但仅适用于WINDOWS平台,以下方法全平台适合. datetim ...

  2. mybatis insert update delete返回都是整型 0，1，增，删，改要提交事物

    mybatis insert update delete返回都是整型 0,1, 没有扔 增,删,改要提交事物

  3. HDU 1298 T9 ( 字典树 )

    题意 : 给你 w 个单词以及他们的频率,现在给出模拟 9 键打字的一串数字,要你在其模拟打字的过程中给出不同长度的提示词,出现的提示词应当是之前频率最高的,当然提示词不需要完整的,也可以是 w 个单 ...

  4. [算法]Min_25筛

    前言 本篇文章中使用的字母\(p\),指\(\text{任意的} p \in \text{素数集合}\) 应用场景 若函数\(f(x)\)满足, \(f(x)\)是积性函数 \(f(p)\)可以使用多 ...

  5. input 的type类型值

    input有很多属性,我们先来说一下最原始的,也就是HTML5之前的 1)text: 定义单行的输入字段,可扎起其中输入文本 2)password:定义密码字段,会显示自符掩码 3)file: 定义输 ...

  6. js返回上一页并刷新的几种方法

    1.返回上一页 1)<a href="javascript:history.go(-1)"></a> 2)<a href="javascri ...

  7. JSP Cookies处理

    JSP Cookies处理 Cookies是存储在客户机的文本文件,它们保存了大量轨迹信息.在servlet技术基础上,JSP显然能够提供对HTTP cookies的支持. 通常有三个步骤来识别回头客 ...

  8. 【转】阿里架构总监一次讲透中台架构，13页PPT精华详解

    转:https://blog.csdn.net/u011323949/article/details/99542576 本文整理了阿里几位技术专家,如架构总监 谢纯良,中间件技术专家 玄难等几位大牛, ...

  9. Codeforces 95C Volleyball（最短路）

    题目链接:http://codeforces.com/problemset/problem/95/C C. Volleyball time limit per test 2 seconds memor ...

  10. SqlServer2012 File Table文件表

    SQL Server 2012 提供一种特殊的“文件表”,也称为“FileTable”. FileTable 是一种专用的用户表,它包含存储 FILESTREAM 数据的预定义架构以及文件和目录层次结 ...