<!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. 【转】伪静态URLRewrite学习笔记

    UrlRewrite: UrlRewrite就是我们通常说的地址重写,用户得到的全部都是经过处理后的URL地址,类似于Apache的mod_rewrite.将我们的动态网页地址转化为静态的地址,如ht ...

  2. wordpress stratus模板使用 产品显示问题

    产品不显示,只显示展示产品代码. 1.研究原站demo,思考产品展示调用自woocommerce. 2.查看woocommerce文档,更新展示代码. 3.修改后产品出现,但是多余的关联推荐也展示出来 ...

  3. Axure 资料搜集

    Axure官方核心训练(翻译) http://www.webppd.com/thread-9347-1-1.html 原文链接:http://www.axure.com/learn 下载链接:http ...

  4. Ninject之旅之十一：Ninject动态工厂(附程序下载)

    摘要 如果我们已经知道了一个类所有的依赖项,在我们只需要依赖项的一个实例的场景中,在类的构造函数中引入一系列的依赖项是容易的.但是有些情况,我们需要在一个类里创建依赖项的多个实例,这时候Ninject ...

  5. ViewState提交后丢失，竟然是OnInit搞的鬼

    提交后报错,断点看ViewStat值没有了.排查半天完全不知道怎么回事. 百度搜索了下ViewState提交丢失.然后CSDN一个帖子说的半拉子话提点了我. 然后想到我经常重写这些函数.以前怎么没遇到 ...

  6. PHP常用函数大全

    usleep() 函数延迟代码执行若干微秒.unpack() 函数从二进制字符串对数据进行解包.uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID.time_sleep_until() ...

  7. iOS强制屏幕旋转

    /** 强制旋转屏幕为纵向 (注:这种方式 键盘不能旋转过来; iOS8.x下 UIAlterView旋转不过来  ) @return */ + (void)rotateOrientationPort ...

  8. PHP面向对象_重载新的方法（parent::）

    在学习PHP 这种语言中你会发现, PHP中的方法是不能重载的, 所谓的方法重载就是定义相同的方法名,通过“参数的个数“不同或“参数的类型“不 同,来访问我们的相同方法名的不同方法.但是因为PHP是弱 ...

  9. SQL中判断一串字符中是否有特定的字符

    ),) SET @s='1,2,3,4,5,6,7,8,9,10' 一:SET @sql='select col='''+ replace(@s,',',''' union all select '' ...

  10. Exhange上添加IMAP4

    1.登录到Exchange admim Center,选择servers,双击servers名称,选择IMAP4 2.服务器上查看任务管理器中的服务器,找到exchange imap4两个服务器是否开 ...