用原生js跟jquery实现checkbox全选反选的一个例子

原生js：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>checkbox</title>

</head>

<body>

<div id="check-all">

    <input type="checkbox" name="check-all">全选

</div>

<div id="sub-checkbox">

    <input type="checkbox" name="sub-checkbox">

    <input type="checkbox" name="sub-checkbox">

    <input type="checkbox" name="sub-checkbox">

    <input type="checkbox" name="sub-checkbox">

    <input type="checkbox" name="sub-checkbox">

</div>

<script>

    var checkAll = document.querySelector('[name=check-all]');

    var subCheckbox = document.querySelectorAll('[name=sub-checkbox]');

    //绑定全选、反选事件

    checkAll.addEventListener('change', function () {

        if (this.checked) {

            for (var i = 0; i < subCheckbox.length; i++) {

                subCheckbox[i].checked = true;

            }

        } else {

            for (var i = 0; i < subCheckbox.length; i++) {

                subCheckbox[i].checked = false;

            }

        }

    }, false);

    //绑定sub checkbox的事件

    for (var i = 0; i < subCheckbox.length; i++) {

        subCheckbox[i].addEventListener('change', function () {

            var checkboxnum = subCheckbox.length;

            var checked = document.querySelectorAll('[name=sub-checkbox]:checked').length;

            if (checkboxnum == checked) {  //如果选中的sub checkbox与全部的sub checkbox一样多，则勾选全选的checkbox

                checkAll.checked = true;

            } else {  //反之取消勾选

                checkAll.checked = false;

            }

        }, false);

    }

</script>

</body>

</html>

jquery（需引入jquery）：

$(document).ready(function () {

    //checkbox select all

    $(document).on('change', '[name=check-all]', function () {

        if ($(this).prop('checked')) {

            $('[name=sub-checkbox]').prop('checked', true);

        } else {

            $('[name=sub-checkbox]').prop('checked', false);

        }

    });

    //sub checkbox

    $(document).on('change', '[name=sub-checkbox]', function () {

        var checkboxnum = $('[name=sub-checkbox]').length;

        var checked = $('[name=sub-checkbox]:checked').length;

        if (checkboxnum == checked) {

            $('[name=check-all]').prop('checked', true);

        } else {

            $('[name=check-all]').prop('checked', false);

        }

    });

});

思路都是一样的，给总复选框绑定事件实现全选反选功能；给子复选框绑定事件，当所有的子复选框都选中时总复选框勾选，当有一个子复选框被取消勾选时，总复选框取消勾选，这个功能是通过比较被选中子复选框数量跟所有子复选框数量来实现的。

需要注意的是jquery中获取checkbox勾选状态时用prop()，不用attr()。

绑定事件 由于querySelectorAll()返回的是一个NodeList，所以要写个循环一个节点一个节点绑定。

checkbox全选与反选的更多相关文章

  1. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  2. checkbox 全选，反选 ，全不选

    在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...

  3. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  4. Checkbox 全选、反选

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></t ...

  5. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  6. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  7. jquery一键控制checkbox全选，反选，全不选。

    jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法. Hml的checkbox没有加name,只用了 div 嵌套. 如有更好的方法,望指点!! //全选 ...

  8. jQuery使用prop设置checkbox全选、反选

    $(function(){     var checkbox = $("input[type='checkbox']");     //全选     $('#select-all' ...

  9. 关于checkbox全选与反选的问题

    在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...

随机推荐

  1. Microshaoft WinDbg cmdtree

    windbg ANSI Command Tree 1.0 title {"Microshaoft Commands"} body {"cmdtree"} {&q ...

  2. java的分层开发

    既然是分层开发,首先我们需要知道的是分为那几个层,并且是干什么的? 1.实体层(entity) 对应数据库中的一张表,有了它可以降低耦合性,同时也是数据的载体. 2.数据访问对象(data acces ...

  3. windows下mongodb安装与使用整理

    一.首先安装mongodb 1.下载地址:http://www.mongodb.org/downloads 2.解压缩到自己想要安装的目录,比如d:\mongodb 3.创建文件夹d:\mongodb ...

  4. em与rem

    em是相对于父元素的font-size,rem是相对于根元素的font-size. rem的补充: ① 对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定 ...

  5. loadrunner怎么将变量保存到参数中

    用这个lr_save_string 函数 char *b = "很简单";lr_save_string(b,"b"); lr_output_message(&q ...

  6. Spring -配置集合属性

    1 可使用<list> <map> <set>等来配置集合属性2 List <!-- 配置List属性 --> <bean id="pe ...

  7. 伪Acmer的推理(dfs/bfs)

    时间限制:1000MS  内存限制:65535K 提交次数:12 通过次数:9 收入:32 题型: 编程题   语言: C++;C Description 现在正是期末,在复习离散数学的Acmer遇到 ...

  8. 【CLR Via C#】第5章 基元类型、引用类型、值类型

    第二遍看这本书,决定记录一下加深印象. 1,基元类型 什么事基元类型?基元类型是直接映射到FrameWork类库(FCL)中存在的类型,编译器直接支持的数据类型.比如int直接映射到System.In ...

  9. SpringBoot使用velocity模板引擎

    https://my.oschina.net/universsky/blog/704446

  10. 线段树(区间操作) POJ 3325 Help with Intervals

    题目传送门 题意:四种集合的操作,对应区间的01,问最后存在集合存在的区间. 分析:U T [l, r]填充1; I T [0, l), (r, N]填充0; D T [l, r]填充0; C T[0 ...