<!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. SonarQube规则之漏洞类型

    漏洞类型: 1."@RequestMapping" methods should be "public"漏洞 阻断标注了RequestMapping是contr ...

  2. mybatis config 快速生成xml DAO

    0.加jar包 1.a.BAT java -jar E:\GZH\Mybaits\mybatis-generator-core-1.3.2\lib\mybatis-generator-core-1.3 ...

  3. 又联考了一场，感觉自己好菜啊，T1没写出来，后来花了一个早上调试。QAQ。最后发现是个-1还有取模没打。。。TAT。。。难受极了！！！

    简单的区间(interval) 题目描述: 样例输入: 样例1: 4 3 1 2 3 4 样例2: 4 2 4 4 7 4 样例输出: 样例1: 3 样例2: 6 提示: 时间限制:1000ms 空间 ...

  4. 解决Acunetix 12中文汉化的方法

    最近下载一款测试软件acunetix,苦于满屏英文的苦恼,看不懂,于是乎就问度娘,结果度娘就是给中文破解包: 我是12版的,网上提供的都是11版的,没法用.怎么办呢?还好我是做测试的,平时做兼容性测试 ...

  5. 百度地图 API 及使用

    如果我们想使用地图的功能,我们就得使用别人的接口,百度地图无疑是个不错的选择 百度地图的网址:http://lbsyun.baidu.com/ 我们想使用里面的功能,就必须要获取密钥 如果时第一次使用 ...

  6. postgresql_action

    SELECT * FROM x123_area a LEFT JOIN x123_user_task_brief utb ON utb.ref_area_code = a.area_code WHER ...

  7. python-笔记（四）函数

    一.函数是什么? 函数一次来源于数学,但是编程中的[函数]的概念,与数学中的函数还是有很大的不同的,编程中的函数在英文中也有很多不同的叫法. 在Basic中叫做subroutine(子过程或子程序), ...

  8. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  9. 我常用的前端开发工具—cutterman,mark man,sublime text,yeoman,gulp……

    虽然才刚刚开始练习切图,不过之前还是接触到不少工具的,决定一一用上,果然用了一天就切完了一个psd,对于一个菜鸟来说,还是很开心的. 我先从学ui网下载了一个psd.切图肯定是要用的ps的啦,这里和大 ...

  10. WinForm 皮肤，自定义控件WinForm.UI

    WinForm.UI https://github.com/YuanJianTing/WinForm.UI WinForm 皮肤,自定义控件 使用方式: BaseForm: public partia ...