用原生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. C# 非UI线程对控件的控制

    第一步:定义委托 public delegate void wei(string ss); 第二步:控制UI的方法 public void get1(string ss) { richTextBox1 ...

  2. ServerSocket 默认邦定IP

    转自:http://cuisuqiang.iteye.com/blog/2037769 开发中需要开启服务端的时候,本地测试都是直接写端口,实际环境也是需要指定要邦定的IP才可以. 因为对于服务器来说 ...

  3. Codeforces Round #103 (Div. 2) D. Missile Silos(spfa + 枚举边)

    题目链接:http://codeforces.com/problemset/problem/144/D 思路:首先spfa求出中心点S到其余每个顶点的距离,统计各顶点到中心点的距离为L的点,然后就是要 ...

  4. Oracle自动备份脚本(网上找到的资料)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  5. css整理－06 表和列表

    表格式化 表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbo ...

  6. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

  7. 使用注解方式定义和配置aop

    http://blog.sina.com.cn/s/blog_5e6d29fd0100ycka.html

  8. 图论 SRM 674 Div1 VampireTree 250

    Problem Statement      You are a genealogist specializing in family trees of vampires. Vampire famil ...

  9. VMware 锐捷 NAT模式的服务自动关闭的解决办法

    之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...

  10. [转]Modernizr的介绍和使用

    转载自:http://blog.chinaunix.net/uid-21633169-id-4286857.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入 ...