【JavaScript小练习3】全选练习

最新推荐文章于 2022-07-16 17:44:04 发布

Happy_Ranmo

最新推荐文章于 2022-07-16 17:44:04 发布

阅读量95

点赞数

分类专栏：前端小练习文章标签： js

本文链接：https://blog.csdn.net/m0_51252051/article/details/114441300

版权

前端小练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.4.4 全选练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
</style>
<body>
    <form method="post" action="">
        你的爱好的运动是？<input type="checkbox" id="checkAllBox" />全选/全不选
        <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="checkRevBtn" value="反选"/>
        <input type="button" id="sendBtn" value="提交"/>
    </form>
       

    

</body>
<script>
    var myclick = function (btn,fun){
        var btn = document.getElementById(btn);
        btn.onclick = fun;
    }
    var item = document.getElementsByName("items");

    //1.#checkedAl1Btn  全选
    myclick("checkAllBtn",function(){
        var allCheck = document.getElementsByName("items");
        for(var i=0;i<allCheck.length;i++)
            allCheck[i].checked=true;
        checkAllBox.checked=true; //6
    });
    //2.#checkedNoBtn  全不选
    myclick("checkNoBtn",function(){
        var allNoCheck = document.getElementsByName("items");
        for(var i=0;i<allNoCheck.length;i++) 
            allNoCheck[i].checked = false;
        checkAllBox.checked=false;//6
    });
    //3.#checkedRevBtn 反选
    myclick("checkRevBtn",function(){
        var RevBtn = document.getElementsByName("items");
        for(var i=0;i<RevBtn.length;i++) 
            RevBtn[i].checked = (RevBtn[i].checked?false:true);
        checkAllBox.checked=true; //6
        checkAllBox.checked=true; //6
    });
    //4.#sendBtn  提交
    myclick("sendBtn",function(){
        for(var i = 0; i<item.length;i++){
            if(item[i].checked)alert(item[i].value);
        }
    });

     //5.#checkedA11Box  <全选、全不选> 勾选框
        var checkAllBox = document.getElementById("checkAllBox");
        checkAllBox.onclick = function(){
            if(checkAllBox.checked){
            for(var i=0;i<item.length;i++)
                item[i].checked = true;
            }
            else{
                for(i=0;i<item.length;i++)
                    item[i].checked = false;
            }
        };
    //6.items   5的加强，其他框全选或全不选，会作用到<全选/全不选>上
            for(var i=0;i<item.length;i++){
                item[i].onclick = function(){
                    var temp=0;
                    for(var j=0;j<item.length;j++){
                        if(!item[j].checked){
                            checkAllBox.checked=false;
                            temp=0;
                            break;
                        }
                        temp++;
                    
                    if(item[j].checked)checkAllBox.checked=true;
                    }
                
                }
            }

</script>
</title>
</html>

Happy_Ranmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript小练习3】全选练习

1.4.4 全选练习<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><style></style><body> <form method="post" action=""> 你的爱好的运动是？<input type="
复制链接

扫一扫