JS实现全选、反选、不选
效果图：
代码如下，复制即可使用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){//全局加载 var oi = document.getElementById("oi");//全选按钮获取节点 var po = document.getElementById("po");//单选按钮获取节点 var yu = document.getElementById("yu");//反选按钮获取节点 var inp = document.getElementsByTagName("input"); oi.onclick = function(){//全选按钮加载点击事件 for(var i = 0;i < inp.length;i++){//全选按钮循环 小于按钮和的全选中 按钮个数和为i inp[i].checked = true;//按纽的属性值小于按钮个数是=（真）true } } po.onclick = function(){ for(var i = 0;i < inp.length;i++){ inp[i].checked = false; } } yu.onclick = function(){ for(var i= 0;i < inp.length;i++){ if( inp[i].checked == true){ inp[i].checked = false; }else { inp[i].checked = true; } } } } </script> </head> <body> <input type="checkbox" value="足球" name="1" /><br/> <input type="checkbox" value="足球" name="2" /><br/> <input type="checkbox" value="足球" name="3" /><br/> <input type="checkbox" value="足球" name="4"/><br/> <input type="checkbox" value="足球" name="5" /><br/> <input type="checkbox" value="足球" name="6" /><br/> <input type="checkbox" value="足球" name="7" /><br/> <input type="checkbox" value="足球" name="8" /><br/> <input type="checkbox" value="足球" name="9" /><br/> <input type="checkbox" value="足球" name="0" /><br/> <input type="button" value="全选" id="oi"/> <input type="button" value="不全选" id="po"/> <input type="button" value="反选" id="yu"/> </body>
</html>
如有错误，欢迎联系我改正，非常感谢！！！
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12317.html