<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>lf</title>

        <script type="text/javascript">

            function selectAllOrNo(){

                var choice = document.getElementById("choose");

                //根据对应的状态全选或全不选

                if(choice.checked==true){

                    selectAll();

                }else{

                    noSelect();

                }

            }

            function selectAll(){

                var choice = document.getElementById("choose");

                choice.checked=true;

                //获取interest的复选框

                var interests = document.getElementsByName("interest");

                // 遍历

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

                    var interest = interests[i];

                    interest.checked = true;

                }

            }

            function noSelect(){

                var choice = document.getElementById("choose");

                choice.checked=false;

                //获取interest的复选框

                var interests = document.getElementsByName("interest");

                // 遍历

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

                    var interest = interests[i];

                    interest.checked = false;

                }

            }

            function selectOther(){

                var choice = document.getElementById("choose");

                choice.checked=true;

                //获取interest的复选框

                var interests = document.getElementsByName("interest");

                // 遍历

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

                    var interest = interests[i];

                    interest.checked = !interest.checked;

                    // 如果存在未选择，则设置全选/全不选为不选择状态

                    checkSelect();

                }

            }

            // 如果存在未选择，则设置全选/全不选为不选择状态

            function checkSelect(){

                var choice = document.getElementById("choose");

                choice.checked=true;

                //获取interest的复选框

                var interests = document.getElementsByName("interest");

                // 遍历

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

                    var interest = interests[i];

                    // 如果存在未选择，则设置全选/全不选为不选择状态

                    if(interest.checked==false){

                        choice.checked=false;

                    }

                }

            }

    </script>

    </head>

    <body>

          你爱好的运动是？

        <input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>

        <input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球

        <input type="checkbox" name="interest" value="篮球"  onchange="checkSelect()"/>篮球

        <input type="checkbox" name="interest" value="羽毛球"  onchange="checkSelect()"/>羽毛球

        <input type="checkbox" name="interest" value="乒乓球"  onchange="checkSelect()"/>乒乓球

        <br>

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

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

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

    </body>

</html>

html 全选或全不选小案例的更多相关文章

  1. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  2. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  3. html table之 全选，全不选

    就是这个小功能让我和组长引发争端,就是这个小功能让我差点"被"辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗? < ...

  4. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  5. ExtJS中，将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  6. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  7. CheckBox复选框全选以及获取值

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

  9. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

随机推荐

  1. CSS兼容性(IE和Firefox)技巧大全

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  2. PHP获取当前日期和时间的方法

    PHP获取当前日期和时间的方法 来源:wikiHow   时间:2014-12-04 14:49:45   阅读数:7240 分享到:0 [导读] PHP是用来创建网络中动态内容的常见语言,因此PHP ...

  3. php 分词 —— PHPAnalysis无组件分词系统

    分词,顾名思义就是把词语分开,从哪里分开?当然是一大堆词语里了,一大堆词语是什么?是废话或者名言.这在数据库搜索时非常有用. 官方网站 http://www.phpbone.com/phpanalys ...

  4. 应用github pages创建自己的个人博客

    首先你需要注册自己的github账号 1.登录或者注册github,登录之后点击右上角的“+”号,选择“New repository”菜单,创建仓库,用于存储和博客相关的源文件. 2.跳转页面将填写域 ...

  5. 删除win7中的库/收藏夹/家庭组/网络

    通过修改注册表删除库/收藏夹/家庭组/网络(还是不习惯库的这种管理方式, 导航里面又太占地方) 库:[HKEY_CLASSES_ROOT\CLSID\{031E4825-7B94-4dc3-B131- ...

  6. 最大子序列和 o(n)

    问题: 给定一整数序列A1, A2,... An (可能有负数),求A1~An的一个子序列Ai~Aj,使得Ai到Aj的和最大 例如:整数序列-2, 11, -4, 13, -5, 2, -5, -3, ...

  7. 位与(&)常用编程技巧

    补充知识:1)正整数的补码与原码相同:                2)求负整数的补码:原码 符号位不变,数值位各位取反,最后整个数加1得到补码:                3)按位与& ...

  8. Asp.net MVC23 使用Areas功能的常见错误

    一般WEB项目都会不同的页面区域,如:用户前台.用户后台.管理员后台. 访问的URL: 用户前台:www.domain.com/home/index 用户后台:www.domain.com/admin ...

  9. Magento打印(配送单、退款单、发票)时PDF中的乱码问题

    我使用Magento1.4.2,在其自带的TTF文件不能很好地解析中文字符,TTF文件的位置在网站根目录下的/lib/LinLibertineFont/中.打印的中文字符都是这样的 解决方法: 1.在 ...

  10. Vim-Vundle-plugins-scripts

    配置文件.vimrc set tabstop= set softtabstop= set shiftwidth= set noexpandtab set autoindent set cindent ...