JSDOM查询练习

最新推荐文章于 2022-08-25 10:41:45 发布

前程韶光

最新推荐文章于 2022-08-25 10:41:45 发布

阅读量147

点赞数

分类专栏： JS 文章标签： javascript ecmascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51235620/article/details/120882573

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这段代码演示了如何使用JavaScript实现HTML页面中全选、全不选、反选多选框的功能，并在点击提交时显示选中的选项。通过监听按钮点击事件，动态更新全选框的状态，并确保全选框的状态与多选框的状态保持一致。此外，还实现了根据多选框选中状态更新全选按钮的逻辑。

摘要由CSDN通过智能技术生成

效果图如下：
请添加图片描述
实现效果如下：
1点击全选按钮，四个多选框全部选中
2点击全不选按钮，四个多选框全部不选中
3点击反选按钮，四个多选框状态取反
4点击提交按钮，将所有被选中的多选框以弹窗的形式弹出
5最上方的按钮会根据四个多选框的选中情况依次变化
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var items=document.getElementsByName("items");
            var checkedAllBox=document.getElementById("checkedAllBox");
            /*
                全选按钮
                    点击按钮以后，四个多选框全都被选中
            */
            //1.#checkedAllBtn
            //为id为checkedAllBtn的按钮绑定单击响应函数
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function(){
                checkedAllBox.checked=true;
                for(var i=0;i<items.length;i++)//遍历数组
                {
                    items[i].checked=true;
                }
            }
            //2.#checkedNoBtn
            //为id为checkedNoBtn的按钮绑定单击响应函数
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function(){
                checkedAllBox.checked=false;
                for(var i=0;i<items.length;i++)//遍历数组
                {
                    items[i].checked=false;
                }
            }
            //3.#checkedRevBtn
            //为id为checkedRevBtn的按钮绑定单击响应函数
            var checkedRevBtn=document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick=function(){
                for(var i=0;i<items.length;i++)//遍历数组
                {
                    items[i].checked=!items[i].checked;
                }
            }
            //4.#sendBtn
            //点击按钮以后，将所有选中的多选框的value属性值弹出
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function(){
                for(var i=0;i<items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            }
            //5.#checkedAllBox
            //当选中时，多选框也全部选中，当不选中时，多选框也全部不选中
            checkedAllBox.onclick=function(){
                for(var i=0;i<items.length;i++)
                {
                    items[i].checked=checkedAllBox.checked;
                    //items[i].checked=this.checked;//两者完全等价
                }
            };
            //6.#Items
            //如果四个多选框全都选中，则checkedAllBox也选中
            //如果四个多选框有一个没选中，则checkedAllBox也不选中
            //为四个多选框分别绑定响应函数
            for(var i=0;i<items.length;i++){
                var j;
                items[i].onclick=function(){
                    for( j=0;j<items.length;j++){
                        if(items[j].checked==false)
                        break;
                    }
                    if(j==items.length)
                    checkedAllBox.checked=true;
                    else
                    checkedAllBox.checked=false;
                }
            }
        };
    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<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="checkedAllBtn" value="全选">
        <input type="button" id="checkedNoBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反选">
        <input type="button" id="sendBtn" value="提交">
    </form>
</body>
</html>