用原生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. SVN-简要说明

    SVN官方推荐在一个版本库的根目录下先建立trunk.branches.tags这三个文件夹,其中trunk是开发主干,存放日常开发的内容:branches存放各分支的内容,比如为不同客户定制的不同版 ...

  2. 用Node.js开发Windows 10物联网应用

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 未来10年内,物联网将会如移动互联网这样深入到我们生活的各方各面.所以微软现在对物联网进行了 ...

  3. Android屏幕适配全攻略（最权威的官方适配指导） (转)

    招聘信息: Cocos2d-X 前端主程 [新浪微博]手机客户端iOS研发工程师 20k-40k iOS 开发工程师 iOS高级开发工程师(中国排名第一的企业级移动互联网云计算公司 和创科技 红圈营销 ...

  4. 关于如何在MFC工程中输入不同的数据进行调试

    我们可以采用c++的文件输入输出来进行调试 这样就绕过了不能使用黑窗口输入数据就不能调试的思维定式 不是黑窗口的我们都可以考虑用文件流输入输出 或者用控件来输入? http://blog.csdn.n ...

  5. C#中Process类的使用

    本文来自: http://www.cnblogs.com/kay/archive/2008/11/25/1340387.html Process 类的作用是对系统进程进行管理,我们使用Process类 ...

  6. UpdatePanel的使用方法

    UpdatePanel控件也是Ajax里用得最多的控件之一,UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel控件里,他必须和上一次说的Scri ...

  7. requireJS的使用_API（1）

    之前有介绍过requireJS(模块化开发),可以看看 ,但是不详细,所以今天参考官网来详细介绍一下: 1.加载js文件: RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<scr ...

  8. jQuery-事件以及动画

    事件: 1.//方法1 $(window).load(function(){ }) window.onload=function(){ } //方法2 function one(){ alert(&q ...

  9. 【CLR in c#】属性

    1.无参属性 1.为什么有字段还需要属性呢? 因为字段很容易写出不恰当的代码,破坏对象的状态,比如Age=-1.人的年纪不可能为负数.使用属性后你可以缓存某些值或者推迟创建一些内部对象,你可以以线程安 ...

  10. 每天一个linux命令--awk

    统计计算日志 pmail@app2linux04 performance]$ grep 'user:logBehaviorAction' performance.log|awk -F '|' '{pr ...