简单的全选，不选，反选的js实现方式

最新推荐文章于 2021-05-15 18:17:46 发布

king-w

最新推荐文章于 2021-05-15 18:17:46 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

文章标签： h5 js 全选反选不选

本文链接：https://blog.youkuaiyun.com/qq_33401924/article/details/52089657

本文介绍了一种使用HTML和JavaScript实现全选、不选及反选复选框的方法。通过简单的页面元素操作，实现了对多个复选框的状态统一控制。此方法适用于表单中需要批量处理选项的场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
         window.onload=function(){
             var oBtn1=document.getElementById('but1');
             var oBtn2=document.getElementById('but2');
             var oBtn3=document.getElementById('but3');
             var oDiv1=document.getElementById('div1');
             var aCh=oDiv1.getElementsByTagName('input');
             oBtn1.onclick=function () {
                 for (var i=0;i<aCh.length;i++){
                     aCh[i].checked=true;
                 }
             }
             oBtn2.onclick=function () {
                 for (var i=0;i<aCh.length;i++){
                     aCh[i].checked=false;
                 }
             }
             oBtn3.onclick=function () {
                for (var i=0;i<aCh.length;i++){
                    if (aCh[i].checked==true){
                        aCh[i].checked=false;
                    }
                    else {
                        aCh[i].checked=true;
                    }
                }
             }
         }
    </script>
</head>
<body>
<input id="but1" type="button" value="全选" >
<input id="but2" type="button" value="不选" >
<input id="but3" type="button" value="反选" >
<div id="div1">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

</body>
</html>

效果图：

全选：

不选：

反选：