js复选框dom的小练习

最新推荐文章于 2024-05-23 11:01:45 发布

黎逍遥

最新推荐文章于 2024-05-23 11:01:45 发布

阅读量32

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_53195433/article/details/131070526

版权

实现效果：

运行代码人如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            // 1.checkedAllBtn 全选按钮，点击后实现复选框全选功能
            //为id为checkedAllBtn，绑定一个单机响应函数
            var checkedAllBox=document.getElementById("checkedAllBox");
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            var items=document.getElementsByName("items")
            checkedAllBtn.onclick=function(){
                //获取四个多选框items
                 var items=document.getElementsByName("items")
                 //设置四个多选框的选中状态
                 for(var i=0;i<items.length;i++){
                    //设置多选框变为选中状态
                    items[i].checked=true;
                    checkedAllBox.checked=true;
                 }

                 
            }
            // 2.checkedNoBtn  全不全按钮，点击后实现复选框全不选功能
            //获取id为checkedNoBtn的对象 
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function(){
                //获取四个多选框
                var items=document.getElementsByName("items")
           
            for(var i=0;i<items.length;i++){
                items[i].checked=false
                checkedAllBox.checked=false;
            }
            
        }
            // 3.checkedRevBtn   反选按钮，点击后实现复选框按钮反选功能
            // 获取id为checkedRevBtn的对象
            var checkedRevBtn=document.getElementById("checkedRevBtn");
            //为该对象写一个点击触发函数
            checkedRevBtn.onclick=function(){
                
                // 获取复选框中的对象
                var items=document.getElementsByName("items")
                //循环遍历复选框的内容，进行反选
                for(var i=0;i<items.length;i++){
                    // if(items[i].checked){
                    //     items[i].checked=false;
                    // }else{
                    //     items[i].checked=true;
                    // }
                    //使用表达式取反,与上面if的效果相同，不过更加优雅
                    items[i].checked=!items[i].checked;
                    //点击时进行判断四个复选框的状态，开始时默认为true
                    checkedAllBox.checked=true;
                for(var j=0;j<items.length;j++)
                {
                    //当状态中有不为true的，这设置为false
                    if(!items[j].checked)
                    {
                        checkedAllBox.checked=false
                    }
                }
                    
                    
                 }
              
            }
              
            

                 
            
            // 4.sendBtn  提交按钮，点击后实现弹出选中复选框的内容
            //获取id为sendBtn的按钮
            var sendBtn=document.getElementById("sendBtn");
            //为sendBtn按钮写一个点击触发函数
            sendBtn.onclick=function(){
                //获取复选框对象
                var items=document.getElementsByName("items");
                //判断进行显示
                for(var i=0;i<items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            }
            // 5.checkedAllBox  //全选/全不选复选框，实现功能：当该复选框被点击时实现其他复选框全选，当该选框没有选中时实现全不选
            // 获取id为checkedAllBox的对象
            
            // 为chekedAllBox写一个点击响应函数
            checkedAllBox.onclick=function(){
                var items=document.getElementsByName("items");
                for(var i=0;i<items.length;i++)
                {
                    // items[i].checked=checkedAllBox.checked;
                    //也可以写成这样，在响应函数中，给哪个对象绑定的，this就是谁
                    items[i].checked=this.checked;
                }
            }
            // 6.items 为多个复选框绑定点击事件

            for(i=0;i<items.length;i++)
            {
                items[i].onclick=function()
                {
                    checkedAllBox.checked=true;
                for(var j=0;j<items.length;j++)
                {
                    if(!items[j].checked)
                    {
                        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="乒乓球" />乒乓球

    <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>