<!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. hdu 1075:What Are You Talking About（字典树，经典题，字典翻译）

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  2. 攻城狮在路上（伍）How tomcat works（四）Tomcat的默认连接器

     在第4章中将通过剖析Tomcat4的默认连接器的代码,讨论需要什么来创建一个真实的Tomcat连接器.     注意:本章中提及的“默认连接器”是指Tomcat4的默认连接器.即使默认的连机器已经被 ...

  3. PHP二维数组的分页

    方法一: <?php $arr_click = array( array( 'clicks' => 3, 'clickDate' =>'2015-10-11' ), array( ' ...

  4. codeforces Round#380 div2

    1.字符串替换ogo+go…换成*** 思路:找ogo记录g位置,做初步替换和标记,非目标字母直接输出, 间隔为2的判断是否一个为标记g,一个为非标记做***替换 #include<iostre ...

  5. 10 个学习iOS开发的最佳网站（转）

    10 个学习iOS开发的最佳网站 作者 jopen 2012-09-26 08:59:56 1) Apple Learning Objective C Objective-C,通常写作ObjC和较少用 ...

  6. Arduino101学习笔记（十二）—— 101定时器中断

    一.API 1.开定时器中断 //*********************************************************************************** ...

  7. flex容器属性(一)

    一,概念 flexible box ,意为"弹性布局",用来为盒状模型提供最大的灵活性. 块级布局更侧重于垂直方向,行内布局更侧重于水平方向,于此相对的,弹性盒子布局算法是方向无关 ...

  8. BurpSuite导出log配合SQLMAP批量扫描注入点

    sqlmap可以批量扫描包含有request的日志文件,而request日志文件可以通过burpsuite来获取, 因此通过sqlmap结合burpsuite工具,可以更加高效的对应用程序是否存在SQ ...

  9. Nginx支持多站点配置小结

    如何配置 web 服务器才能在一个 VPS 上放置多个网站/博客呢?如何通过一个 IP 访问多个站点/域名呢?这是大多数 web 服务器支持的 virtual hosting 功能.即一个IP对应多个 ...

  10. 廖雪峰js教程笔记3

    JavaScript的函数在查找变量时从自身函数定义开始,从"内"向"外"查找.如果内部函数定义了与外部函数重名的变量,则内部函数的变量将"屏蔽&qu ...