<!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. 开发工具Intellij IDEA：常用快捷键

    重命名:shift + F6 查看Javadoc/详情:ctrl + Q 查找接口的实现类:ctrl + alt + B format代码:ctrl + alt + L 全局查询:ctrl + shi ...

  2. 校赛 你的粪坑V2

    原题 今天举办程序设计比赛,2点30分开始,然而你睡到了2点25分,紧张的你将头发梳成大人模样,敷上一层最贵的面膜,穿着滑板鞋,以飞一般的速度奔向计算机学院准备参加程序设计竞赛!冠军是你的! 然而路上 ...

  3. 父页面和iframe之间的通信（操作和传值问题）

    一.jq实现iframe父页面与子页面传值与方法调用 1.值操作 (1)父页面获取子页面的值 $('iframe的id').contents().find(子页面的id).text(); (2)子页面 ...

  4. c++复习——类（1）

    1.  拷贝构造函数 //并没有搞懂 先存着吧  遇到实际情况再回来看看 拷贝构造函数在以下三种情况被调用: (1)当用一个已经初始化过的对象去初始化同类另一个对象时, 拷贝构造函数被调用. Samp ...

  5. 【ArchSummit干货分享】个推大数据金融风控算法实践

    作者:个推高级数据工程师 晓骏 众所周知,金融是数据化程度最高的行业之一,也是人工智能和大数据技术重要的应用领域.随着大数据收集.存储.分析和模型技术日益成熟,大数据技术逐渐应用到金融风控的各个环节. ...

  6. Java 中冒泡排序

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

  7. elementUI分页组件封装

    在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...

  8. LinkedBlockingDeque 源码分析

    LinkedBlockingDeque LinkedBlockingDeque 能解决什么问题?什么时候使用 LinkedBlockingDeque? 1)LinkedBlockingDeque 是基 ...

  9. python 定时器，轮询定时器

    首先想要实现的效果是:每隔1段时间,就去调用1个接口确认结果,直到接口返回的结果为true,停止调用 所以这里会用到python的定时器 先来了解最简单的定时器: python 定时器默认定时器只执行 ...

  10. 机器学习--如何将NLP应用到深度学习(3)

    数据收集以后,我们下面接着要干的事情是如何将文本转换为神经网络能够识别的东西.   词向量 作为自然语言,只有被数学化才能够被计算机认识和计算.数学化的方法有很多,最简单的方法是为每个词分配一个编号, ...