调查问卷练习

最新推荐文章于 2024-03-12 20:50:18 发布

TomKing9

最新推荐文章于 2024-03-12 20:50:18 发布

阅读量524

点赞数 1

分类专栏： js学习文章标签： js javascript html5 css3 css

本文链接：https://blog.csdn.net/TomKing9/article/details/114095739

版权

js学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这是一个有全选全不选反选提交功能的调查问卷
用JavaScript实现的

<!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(){
            let checkedAllBtn=document.getElementById("checkedAllBtn");
            let checkedNoBtn=document.getElementById("checkedNoBtn");
            let checkedRevBtn=document.getElementById("checkedRevBtn");
            let items=document.getElementsByName("items");
            //全选按钮
            checkedAllBtn.onclick=function(){
                for(let i=0;i<items.length;i++){
                    items[i].checked=true;
                }
            };
            //全不选按钮
            checkedNoBtn.onclick=function(){
                for(let i=0;i<items.length;i++){
                    items[i].checked=false;
                }
            };
            //反选按钮
            checkedRevBtn.onclick=function(){
                for(let i=0;i<items.length;i++){
                    // if(items[i].checked==true){
                    //     items[i].checked=false;
                    // }
                    // else{
                    //     items[i].checked=true;
                    // }
                    items[i].checked=!items[i].checked;

                }
            };
            //全选 全不选 多选框
            let checkedAllBox=document.getElementById("checkedAllBox");
            checkedAllBox.onclick=function(){
                // if (checkedAllBox.checked) {
                //     for(let i=0;i<items.length;i++){
                //     items[i].checked=true;
                //     }
                // } 
                // else {
                //     for(let i=0;i<items.length;i++){
                //     items[i].checked=false;
                //     }
                // }
                for(let i=0;i<items.length;i++){
                    items[i].checked=this.checked;  //this is checkedAllBox
                }
            }
            //将全选框跟随四个多选框响应绑定
            for(let i=0;i<items.length;i++){
                items[i]=onclick=function(){
                    checkedAllBox.checked=true; //默认全选box为选中状态
                    for(let j=0;j<items.length;j++){
                        //只要发现一个没选就将全选box设为未选中状态
                        if(!items[j].checked){
                            checkedAllBox.checked=false;
                            break;      //一旦进入判断就已经得出结论
                        }
                        
                    }

                }
            }
            //提交按钮
            let sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function(){
                for(let i=0;i<items.length;i++){
                    if(items[i].checked){
                       alert(items[i].value);
                    }
                }              
            }
        };
    </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>

效果如图

TomKing9

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
调查问卷练习

这是一个有全选全不选反选提交功能的调查问卷用JavaScript实现的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫

专栏目录