<!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. gnuplot安装问题(set terminal "unknown")

    今天在系统同上要装个gnuplot,原来用的都是拷好的虚拟机.这也是第一次装.本来以为分分钟的事,却不料遇到不少麻烦.记录一下,供大家参考 一,快速开始安装 ubuntu下那自然是: sudo apt ...

  2. hdu 4045 2011北京赛区网络赛F 组合数+斯特林数 ***

    插板法基础知识 斯特林数见百科 #include<iostream> #include<cmath> #include<cstdio> #include<cs ...

  3. [JavaCore]JAVA中的泛型

    JAVA中的泛型 [更新总结] 泛型就是定义在类里面的一个类型,这个类型在编写类的时候是不确定的,而在初始化对象时,必须确定该类型:这个类型可以在一个在里定义多个:在一旦使用某种类型,在类方法中,那么 ...

  4. html、css、javascript、JSP 、xml学习顺序应该是怎样的呢？

    html==>css==>javascript==>jsp==>xml 1.先学习基本的HTML知识,了解大部分HTML标签的作用. 2.学习CSS,熟悉如何用CSS去控制HT ...

  5. 同一天的时间差，显示为HHMMSS和指定日期时间部分

    //1.hhmmss private String setGoodsDisBalance(Date startTime,Date endTime){ //时间差:毫秒ms long diff = en ...

  6. Chrome书签被篡改之后的恢复

    chrome书签和备份存放的路径:(XXXX为用户名)(AppData文件夹为隐藏文件夹) \Users\XXXX\AppData\Local\Google\Chrome\User Data\Defa ...

  7. hdu 4770(枚举 + dfs爆搜）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4770 思路:由于最多只有15个".",可以直接枚举放置的位置,然后判断是否能够全部 ...

  8. 移动 Web 开发技巧

    1.使用click会出现绑定点击区域闪一下的情况,解决:给该元素一个样式如下 -webkit-tap-highlight-color: rgba(0,0,0,0); 2.用iphone或ipad浏览很 ...

  9. Emacs 之查看帮助

    // */ // ]]> Emacs  之查看帮助 Table of Contents 1. Emacs 入门 1.1. 查看简单的帮助 1.2. 执行elisp代码 1 Emacs 入门   ...

  10. 【java基础】选择排序and冒泡排序

    前言 : 今天学习的是J2SE视频里的第五章,数组部分,它里面留了一个经典的作业,就是让我们去从1倒9按一定规格排序,这让我想起了学习vb的时候最最让我头疼的两种排序方法,选择排序法 和 冒泡排序法. ...