js复选框实现全选，反选的功能

笑到世界都狼狈

已于 2022-11-11 09:32:59 修改

阅读量735

点赞数 1

分类专栏： js/jq 文章标签： js复选框实现全选反选的功能全选反选

于 2019-12-04 16:22:30 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/103388998

版权

js/jq 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

项目中有遇到这个功能，百度了一个差不多都是点击全选的时候下面的全部选中，在点击的时候，下面的取消选中，但是。。。。。。他们忽略了一点，那就是点击下面的时候，也要实现全选的勾选与不勾选，所以，我用自己的方法做了处理，实现了全选与反选的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <input type="checkbox" onclick="allClick(this);" id="all" />全选
        <div id="checkList">
            <input type="checkbox" value=""/>奇奇
            <input type="checkbox" value=""/>怪怪
            <input type="checkbox" value=""/>马马
            <input type="checkbox" value=""/>虎虎
        </div>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script>
            /**
            *点击全选按钮的时候触发的事件
            */
            function allClick(obj){
                if($(obj).prop("checked")){
                    $("#checkList").find("input[type='checkbox']").prop("checked",true);
                }else{
                    $("#checkList").find("input[type='checkbox']").prop("checked",false);
                }
            }

            // 获取自己复选框长度
            var checkList = $("#checkList>input").length;

            /**
            *点击子集复选框的时候
            *获取选中的长度
            *选中的长度跟复选框长度对比，进而判断全选按钮是否勾选
            */

            $("#checkList>input").on('click',function(){
                var inputs = $("#checkList>input");
                var checkedCounts = 0;
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].checked){
                    checkedCounts++;
                    }
                }
                if (checkedCounts < checkList) {
                    $("#all").prop("checked",false);
                }
                else{
                    $("#all").prop("checked",true);
                }
            })
        </script>
</body>
</html>

注：代码直接复制过去，换个jquery.js就可以用了。

笑到世界都狼狈

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js复选框实现全选，反选的功能

项目中有遇到这个功能，百度了一个差不多都是点击全选的时候下面的全部选中，在点击的时候，下面的取消选中，但是。。。。。。他们忽略了一点，那就是点击下面的时候，也要实现全选的勾选与不勾选，所以，我用自己的方法做了处理，实现了全选与反选的功能。<!DOCTYPE html><html lang="en"><head> <meta charset=...
复制链接

扫一扫

专栏目录