按钮的简单操作，全选，全不选，反选，提交

最新推荐文章于 2022-05-03 10:43:06 发布

原创最新推荐文章于 2022-05-03 10:43:06 发布 · 463 阅读

CC 4.0 BY-SA版权

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {

          //全选
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=(function () {
                var  items=document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    items[i].checked=true;
                }
            });
            //全不选
            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;
                }
            });
            //反选
            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;
                    }
                // items[i].checked=! items[i].checked  简单取反
                }
            });
            //提交
            var sendBtn=document.getElementById("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);
                    }
                }

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

        };



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