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

来源：互联网发布：淘宝秋冬裙子编辑：程序博客网时间：2024/05/20 20:58

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

效果图：

全选：

不选：

反选：

0 0