js复选框全选/全不选/反选

最新推荐文章于 2023-12-13 11:28:53 发布

kelokole

最新推荐文章于 2023-12-13 11:28:53 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/qq_44254672/article/details/91848691

版权

<!DOCTYPE html>
<html>
    <head>
        <title>复选框（checkbox）全选/全不选/反选</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; font-family:Tahoma; font-size:12px; }
            a{ text-decoration: none; color: #09f; cursor: pointer; }
            label, input, a{ vertical-align:middle; }
            label{ padding:0 10px 0 5px; }
            a:hover{ color: red; }
            dl{ width: 120px; margin: 30px auto; padding: 10px 10px 5px; border: 1px solid #666; border-radius: 5px; background: #fafafa;}
            dt{ padding-bottom: 10px; border-bottom: 1px solid #666; }
            dt label{ font-weight: 700; }
            dd p{ display: inline-block; height: 30px; line-height: 30px; }
        </style>
        
        <script src="../../jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            // 创建一个储存数据的数组
            var checkboxs = ["（二）", "（三）", "（四）", "（五）", "（六）", "（七）", "（八）", "（九）", "（十）"];
            $(document).ready(function(){
                // 获取模板
                var str = $("dd p").first().html();
                // 生成内容
                for(var i = 1; i < checkboxs.length; i++){
                    $("dd").append("<p>" + str.replace("选项（一）", "选项" + checkboxs[i]) + "</p>");
                }
            });
        </script>
       
    </head>
    <body>
        <dl class="bpp7">
            <dt><input type="checkbox" id="checkAll" /><label>全选</label><a>反选</a></dt>
            <dd>
                <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
            </dd>    
        </dl>

        <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>

        <script type="text/javascript">
            window.onload = function(){
                // 获取元素
                var clabel = document.getElementsByTagName("label")[0];
                var cinput = document.getElementsByTagName("input");
                var ca = document.getElementsByTagName("a")[0];
                // 判断选框的状态
                var isCheckAll = function(){
                    // 遍历，查看选框的情况
                    for(var i = 1, n = 0; i < cinput.length; i++){
                        // 如果cinput[i]选中的话为真，执行n++
                        cinput[i].checked && n++;
                    }
                    // 如果n的数量满足条件，其cinput[0].checked值为真，反之为假
                    cinput[0].checked = n == cinput.length - 1;
		            clabel.innerHTML = cinput[0].checked ? "全不选" : "全选";
                }
                // 全选/全不选
                cinput[0].onclick = function(){
                    for(var i = 1; i < cinput.length; i++){
                        cinput[i].checked = this.checked;
                    }
                    isCheckAll();
                }
                // 反选
                ca.onclick = function(){
                    for(var i = 1; i < cinput.length; i++){
                        cinput[i].checked = !cinput[i].checked;
                    }
                    isCheckAll();
                }
                //根据复选个数更新全选框状态
                for (var i = 1; i < cinput.length; i++){
                    cinput[i].onclick = function(){
                        isCheckAll();
                    }	
                }	
            }
        </script>
    </body>
</html>

效果图：