JavaScript全选练习，求助！

最新推荐文章于 2021-04-05 17:20:50 发布

weixin_44015787

最新推荐文章于 2021-04-05 17:20:50 发布

阅读量124

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44015787/article/details/89975991

版权

求助大佬，为什么这个代码刷新后只勾选第二行的多选框后第一行的全选没有反应？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script>

        function myClick(idstr,fun){
            var btn = document.getElementById(idstr);
            btn.onclick = fun;
        }

        window.onload = function(){
            //checkAllBtn
            myClick("checkAllBtn",function(){
                //获取四个多选框
                var items = document.getElementsByName("items");
                //alert(items.length);
                for(var i = 0 ; i < items.length ; i++){
                    //通过CheckBox的checked属性可以来获取或设置CheckBox的选中状态；
                    items[i].checked = true;
                }
                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = true;
            });


            //checkNoBtn
            myClick("checkNoBtn",function(){
                var items = document.getElementsByName("items");
                for(var i = 0 ; i < items.length ; i++){
                    items[i].checked = false;
                }
                var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = false;
            });

            //checkARevBtn
            myClick("checkARevBtn",function(){
                var items = document.getElementsByName("items");
                checkedAllBox.checked = true;
                for(var i = 0 ; i < items.length ; i++){
                    items[i].checked = !items[i].checked;

                        if(!items[i].checked){
                            checkedAllBox.checked = false;
                        }

                }



               /* for(var i = 0 ; i < items.length ; i++){
                    items[i].click();
                }
                var checkedAllBox = document.getElementById("checkedAllBox");
                for(var n = 0 ; n < items.length ; n++){
                    items[n].onclick = function(){

                        checkedAllBox.checked = true;

                        for(var m = 0 ; m < items.length ; m++){
                            if(!items[m].checked){
                                checkedAllBox.checked = false;
                                break;
                            }
                        }
                    }
                }*/

            });

            //sendBtn
            myClick("sendBtn",function(){
                var items = document.getElementsByName("items");
                for(var i = 0 ; i < items.length ; i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }


            });


            //checkedAllBox
            var checkedAllBox = document.getElementById("checkedAllBox");
            var items = document.getElementsByName("items");
            checkedAllBox.onclick = function() {
                for (var n = 0; n < items.length; n++) {
                    items[n].checked = this.checked;
                }


                //items
                //  如果四个多选框全都选中，则checkedAllBox也应该选中
                //  如果四个多选框都没选中，则checkedAllBox也应该没选中

                for(var i = 0 ; i < items.length ; i++){
                    items[i].onclick = function(){

                        //checkedAllBox的默认状态为true；
                        checkedAllBox.checked = true;
                        //判断四个多选框是否全选
                        for(var j = 0 ; j < items.length ; j++){
                            if(!items[j].checked){
                                //如果进入该判断则将checkedAllBox设置为false
                                checkedAllBox.checked = false;
                                break;
                            }
                        }
                    }
                }

            };



        };

    </script>
</head>
<body>
<form action="" method="post">
    你爱好的运动是？
    <input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />

    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="兵乓球" />兵乓球

    <br />

    <input type="button" id="checkAllBtn" value="全 选" />
    <input type="button" id="checkNoBtn" value="全不选" />
    <input type="button" id="checkARevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
    
</form>
</body>

weixin_44015787

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全选练习，求助！

求助大佬，为什么这个代码刷新后只勾选第二行的多选框后第一行的全选没有反应？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选练习</title> <script> functio...
复制链接

扫一扫