用原生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. phpMailer在thinkPHP框架中邮件发送

    资源下载地址:http://pan.baidu.com/s/1c0kAoeO 提取码:ry5v 关键代码:application/Common/Common/funciton.php <?php ...

  2. css 内联元素

    内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念.内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一 ...

  3. java中的负数的问题

    在计算机中是使用二制数中的最高位表示来正负. 二进制的储存中都是用的补码,正数的原码.反码和补码相同,负数的原码是最高位为1,反码最高位不变,其余各位取反,补码为其反码+1(重要!!) 首先得知道最高 ...

  4. KMP模式匹配算法

    KMP模式匹配算法 相信很多人对于这个还有点不了解,或者说是不懂,下面,通过一道题,来解决软考中的这个问题! 正题: aaabaaa,其next函数值为多少? 对于这个问题,我们应该怎么做呢? 1.整 ...

  5. CF735C 数论\平衡树叶子节点的最大深度\贪心\斐波那契\条件归一化

    http://codeforces.com/problemset/problem/735/C 题意..采用淘汰赛制..只要打输就退出比赛..而且只有两个选手打过的场数 相差不超过1才能比赛..最后问你 ...

  6. 【myEcplise2015 更换主题+字体颜色】

    更换myEcplise样式: 若对js文件或者java文件中的字体颜色不是很满意,可以去按照这个路径去更新字体颜色: 以javaScript文件为例子: 修改完成之后,javascript文件中文字是 ...

  7. FFmpeg与libx264 x264接口源代码简单分析

    源代码位于“libavcodec/libx264.c”中.正是有了这部分代码,使得FFmpeg可以调用libx264编码H.264视频.  从图中可以看出,libx264对应的AVCodec结构体ff ...

  8. Python小例子（求和）

    简单的数字的求和: a = input('请输入第一个数:') b = input('请输入第二个数:') sum = float(a) + float(b) print('数字{0}和数字{1}相加 ...

  9. 【面经】【转】C程序的内存布局

    一个C语言程序一直以来都是由以下5个段组成: 1.代码段(text segmrnt):存放CPU执行的机器指令,通常情况下,代码段是可共享的,使其可共享的目的是对于频繁被执行的程序,只需要在没存中有有 ...

  10. Android实现全屏的三种方式

    一.通过代码 requestWindowFeature(Window.FEATURE_NO_TITLE);// 隐藏标题栏 getWindow().setFlags(WindowManager.Lay ...