<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选</title>
</head>
<body>
    <input type="button" name="" value="全选" id="one">
    <input type="button" name="" value="反选" id="two">
    <input type="checkbox" name="" id="three">
    <ul>
        <li>
            <input type="checkbox" name="li">
        </li>
        <li>
            <input type="checkbox" name="li">
        </li>
        <li>
            <input type="checkbox" name="li">
        </li>
        <li>
            <input type="checkbox" name="li">
        </li>
        <li>
            <input type="checkbox" name="li">
        </li>
        <li>
            <input type="checkbox" name="li">
        </li>
    </ul>
    <script type="text/javascript">
    var btn1 = document.getElementById('one')
    var btn2 = document.getElementById('two')
    var btn3 = document.getElementById('three')
    var li = document.getElementsByName('li')
    btn1.onclick = function(){
        for(var i = 0;i < li.length;i++){
            if(li[i].checked ==0 ){
                li[i].checked = 1;
            }
        }
        isAll();
    }

btn2.onclick = function(){
        for(var f = 0;f < li.length;f++){
            if (li[f].checked == 1) {
                li[f].checked = 0;
            }else{
                li[f].checked = 1;
            }
        }
        isAll();
    }

　　// 每个checkbox状态修改时判断是否全选
    for(var i = 0;i < li.length;i++){
        li[i].onchange = function(){
            isAll();
        }
    }

　　// 判断当前是否全选
    function isAll(){
        var num = 0;
        for(var i = 0;i < li.length;i++){
            if(li[i].checked == 1){
                num++
            }
        }
        if(num == 6){
            btn3.checked = 1;
        }else{
            btn3.checked = 0;
        }
    }
    </script>

</body>
</html>

JS编写全选，复选按钮的更多相关文章

  1. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  2. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

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

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

  4. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  5. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  6. WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...

  7. java freemarker导出word时添加或勾选复选框

    最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...

  8. iOS开发-UITableView单选多选/复选实现1

    TableView怎样实现单选或者多选呢? 我们的直接思路是改动某一个Cell的样式就可以, 那么改动样式须要通过改动相应的数据, 从这里能够判断我们须要给Cell相应的数据设置一个标志位, 当选中的 ...

  9. js取单选按钮，复选按钮的值

    $("input[name=PType]").bind('click', function () { if ($(this).prop("checked")) ...

随机推荐

  1. 几种常见 容器 比较和分析 hashmap, map, vector, list ...hash table

    list支持快速的插入和删除,但是查找费时; vector支持快速的查找,但是插入费时. map查找的时间复杂度是对数的,这几乎是最快的,hash也是对数的.  如果我自己写,我也会用二叉检索树,它在 ...

  2. QTP操作txt文档

    QTP可以在txt文件(文本文件中读取数据) 首先创造一个文档对象 set fso = createObject("scripting.filesystemobject") 然后用 ...

  3. AX 插入一条记录提示表记录已经存在，但是该记录实际上是不存在的。

    做测试的时候遇到一个情况"AX 插入一条记录提示表记录已经存在,但是该记录实际上是不存在的." 检查到该表(TABLE_ABC)所有的key都是AllowDuplicate的, 继 ...

  4. AngularJS-chapter2-7-前端路由

    Form表单提交会导致页面之间的切换,没法实现单页应用 Ajax请求不会留下History记录(在后台管理系统,没有后台历史记录还可以) ,但在网络型应用或门户型应用(用户没有办法给改页面加标签或分享 ...

  5. cnblogs，我回来了

    之前是在Github上搭了个博客,原因只有一个:可以弄个比较个性的域名,逼格高. 不过用起来倒是麻烦,一是经常纠结自己的主页是不是不够逼格?二就是身在墙内,访问速度不理想. 所以,还是安心的在这里,写 ...

  6. NHibernate系列文章二十：NHibernate关系之一对一（附程序下载）

    摘要 NHibernate一对一关系虽然不经常碰到,但是在对于数据库结构优化的时候,经常会碰到一对一关系.比如,产品详细信息比较多的时候,可以把产品详细信息放到另一张表里面,Product主表只记录产 ...

  7. poi API

    一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二. HSSF概况 HSSF 是 ...

  8. 机器学习PR：k近邻法分类

    k近邻法是一种基本分类与回归方法.本章只讨论k近邻分类,回归方法将在随后专题中进行. 它可以进行多类分类,分类时根据在样本集合中其k个最近邻点的类别,通过多数表决等方式进行预测,因此不具有显式的学习过 ...

  9. python 获取一个列表有多少连续列表

    python 获取一个列表有多少连续列表 例如 有列表 [1,2,3] 那么连续列表就是 [1,2],[2,3],[1,2,3] 程序实现如下: 运行结果:

  10. 在线api地址

    J2SE1.7英文api地址: http://download.oracle.com/javase/7/docs/api/J2SE1.6英文api地址:  http://download.oracle ...