<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');
            var count=0;
            aBtn[0].onclick=function(){
                if(this.checked==true){
                    for(var i=1;i<aBtn.length;i++){
                       aBtn[i].checked=true;
                    }
                    count=aBtn.length-1;
                    document.title=count;
                }else{
                    for(var i=1;i<aBtn.length;i++){
                        aBtn[i].checked=false;
                    }
                    count=0;
                    document.title=count;
                }

            };
            for( var i=1;i<aBtn.length;i++){
                aBtn[i].onclick=function(){
                    if(this.checked==true){
                        count++;
                    }else{
                        count--;
                    }
                    if(count==aBtn.length-1){
                        aBtn[0].checked=true;
                    }else{
                        aBtn[0].checked=false;
                    }
                    document.title=count;
                }
            };
        }
    </script>
</head>
<body>
<input type="checkbox" />
<hr/>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</body>
</html>

js小效果-全选的更多相关文章

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

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

  2. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  3. js实现checkbox全选，全部选和反选效果

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 微信小程序全选多选效果

    效果图: 代码: wxml <view class='hei_top'> <view class='hei_p'>共 <text>4</text> 场& ...

  5. js 表格操作 全选和反选效果 案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js实现-小框框全选

    点击全选下面单独的肉也会全选,再次点击取消 一个一个点击肉,点完--全选也会被选上 HTML代码---CSS略 <table> <tr> <th> <inpu ...

  7. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  8. js EasyUI前台 全选的实现

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAEQCAIAAADj/SKjAAAgAElEQVR4nO1dz48ry1W+/5N3swaFEP ...

  9. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

随机推荐

  1. 无废话ExtJs 入门教程十一[下拉列表：Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  2. Win10 资源文件

    ResourceLoader rl = new ResourceLoader(); DisOutText.Text = rl.GetString("Display"); Resou ...

  3. ICP 算法步骤

    The Iterative Closest Point (ICP) is an algorithm employed to match two surface representations, suc ...

  4. 第一次尝试用 Live Writer 写博客

    之前在官网上下载了最新版的Windows Live Writer,可是安装不了,就在其他网站下了一个试试,可以安装,不过却是2009年的版本,很不喜欢,我希望能体验最新版的,回头还得重新下个最新版的安 ...

  5. Is WPFdead

    最近看到一个bog.http://www.codeproject.com/Articles/818281/Is-WPF-dead-the-present-and-future-of-WPF 大体上讲了 ...

  6. QQ互联登录 微博登录问题

    qq 需要用开放平台的扣扣测试 审核通过后 开放所有用户 微博 出现获取token  个人信息失败  需要在微博里添加测试账号  审核通过后 开放所有用户

  7. 及其简短的Splay代码

    #include <stdio.h> #include <queue> #include <algorithm> #include <stdlib.h> ...

  8. go语言

    Go语言是谷歌推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性.和今天的C++或C一样,Go是一种系统语言. 1.windows开发工具:Golang for Windows ...

  9. PHP之数据类型

    1.PHP字符串(String):一个字符串是一串字符的序列,就像"Hello world!":可以将任何文本放在单引号和双引号中: <?php $x="Hello ...

  10. maven junit 单元测试插件配置

    单元测试插件配置 pom.xml中增加 <dependency> <groupId>junit</groupId> <artifactId>junit& ...