用原生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. h264 profile & level

    转自:http://blog.csdn.net/sphone89/article/details/17492433 H.264 Profiles H.264有四种profile,每个profile支持 ...

  2. FreeMarker学习（宏<#macro>的使用）

    原文链接:https://my.oschina.net/weiweiblog/blog/506301?p=1 用户定义指令-使用@符合来调用  有两种不同的类型:Macro(宏)和transform( ...

  3. strcmp函数使用总结

    Action() { /********************************* * Author:旺仔 * object:strcmp * date:2015-12-09 * fuc:我输 ...

  4. WPD:Page Download Time Breakdown选项详解

    WPD:Page Download Time Breakdown选项详解 “页面下载时间细分”图显示每个页面组件下载时间的细分,可以根据它确定在网页下载期间事务响应时间缓慢是由网络错误引起还是由服务器 ...

  5. js实现页面的自动读秒跳转

    <!-- 代码片段A --> <!-- 倒计时跳转 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  6. cf 106C

    题目链接:http://vjudge.net/contest/139376#problem/E 题意看注释就能懂了,求能获得的最大价值. 代码: #include<iostream> #i ...

  7. poj1328 贪心

    http://http://poj.org/problem?id=1328 神TM贪心. 不懂请自行搜博客. AC代码: #include<cstdio> #include<algo ...

  8. 《DSP using MATLAB》示例Example4.4

    代码: x1 = [2, 3, 4]; x2 = [3, 4, 5, 6]; % x1 x2 sequences % n1 = 0:1:2; n2 = 0:1:3; n1 = 0:1:length(x ...

  9. css/js(工作中遇到的问题)-2

    iOS6 中的 apple-itunes-app tag 例子 //iOS6, safari才有效 <meta name="apple-itunes-app" content ...

  10. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...