js实现全选全不选反选
Posted 带着蚂蚁去散步
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现全选全不选反选相关的知识，希望对你有一定的参考价值。
一个js的简单实验
思路：通过 document.getElementsByTagName(\'input\')获取集合，判断类型是否为checkbox，再对其进行操作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input type="checkbox" name="fruit" value="苹果">苹果 <input type="checkbox" name="fruit" value="香蕉">香蕉 <input type="checkbox" name="fruit" value="芒果">芒果 <input type="checkbox" name="fruit" value="葡萄">葡萄 </form> <button id="all">全选</button> <button id="not">全不选</button> <button id="reve">反选</button> <script> var all = document.getElementById(\'all\'); var not = document.getElementById(\'not\'); var reve = document.getElementById(\'reve\'); var fruit = document.getElementsByTagName(\'input\'); //全选 all.onclick = function(){ for(var i=0;i<=fruit.length;i++){ if(fruit[i].type == \'checkbox\'){ fruit[i].checked = true; } } }; //全不选 not.onclick = function(){ for(var i=0;i<=fruit.length;i++){ if(fruit[i].type == \'checkbox\'){ fruit[i].checked = false; } } }; //反选 reve.onclick = function(){ for(var i=0;i<=fruit.length;i++){ if(fruit[i].type == \'checkbox\'){ /*if(fruit[i].checked == true){ fruit[i].checked = false; }else{ fruit[i].checked = true; }*/ fruit[i].checked = !fruit[i].checked; } } }; </script> </body> </html>
以上是关于js实现全选全不选反选的主要内容，如果未能解决你的问题，请参考以下文章