js的全选，反选，不选的例子

最新推荐文章于 2023-08-28 22:45:24 发布

码深

最新推荐文章于 2023-08-28 22:45:24 发布

阅读量209

点赞数

分类专栏： js的全选，反选，不选的例子文章标签： js的全选，反选，不选的例子

本文链接：https://blog.youkuaiyun.com/weixin_43158701/article/details/102946030

版权

js的全选，反选，不选的例子专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现全选、反选和取消选择复选框的方法。通过简单的代码示例，展示了如何操作页面上的多个输入元素，以响应不同的按钮点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="全选" id="but1">
    <input type="button" value="反选" id="but2">
    <input type="button" value="不选" id="but3"><br/>
    <div id="div1">
            <input type="checkbox" id="check1"><br/>
            <input type="checkbox" id="check2"><br/>
            <input type="checkbox" id="check3"><br/>
            <input type="checkbox" id="check4"><br/>
            <input type="checkbox" id="check5"><br/>
            <input type="checkbox" id="check6"><br/>
            <input type="checkbox" id="check7"><br/>
            <input type="checkbox" id="check8"><br/>
            <input type="checkbox" id="check9"><br/>
            <input type="checkbox" id="check10"><br/>        
    </div>
    
    <script>
        window.onload = function(){
            var but1 = document.getElementById("but1");
            var but2 = document.getElementById("but2");
            var but3 = document.getElementById("but3");
            var div1 = document.getElementById("div1");
            var ins = document.getElementsByTagName("input");
            but1.onclick = function(){
                for(var i=0;i<ins.length;i++){
                    ins[i].checked = true;
                }
            }
            but2.onclick = function(){
                for(var i=0;i<ins.length;i++){
                    if(ins[i].checked == true){
                        ins[i].checked = false;
                    }else{
                        ins[i].checked = true;
                    }
                }
            }
            but3.onclick = function(){
                for(var i=0;i<ins.length;i++){
                    ins[i].checked = false;
                }
            }
        }
    </script>
</body>
</html>

效果图