js全选反选

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js全选反选相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <input type="checkbox" name="checkboxs" id="" value="咕咕" />咕咕<br>
            <input type="checkbox" name="checkboxs" id="" value="嘎嘎" />嘎嘎<br>
            <input type="checkbox" name="checkboxs" id="" value="嘟嘟" />嘟嘟<br>
            <input type="button" id="quanxuan" value="全选" />
            <input type="button" id="quanbuxuan" value="全不选" />
            <input type="button" id="fanxuan" value="反选" />
        </div>
        <script type="text/javascript">
            var checkboxs = document.getElementsByName("checkboxs");
            
            document.getElementById("quanxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = true;
                }
            }
            document.getElementById("quanbuxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = false;
                }
            }
            document.getElementById("fanxuan").onclick=function(){
                for(var i=0;i<checkboxs.length;i++){
                    checkboxs[i].checked = !checkboxs[i].checked;
                }
            }
            
        </script>
    </body>
</html>

 

以上是关于js全选反选的主要内容，如果未能解决你的问题，请参考以下文章

js全选，反选，全不选

Layui table中筛选列增加 [全选，反选] 功能【转】

Vue实现单选、全选和反选

js实现全选反选

js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

jquery全选反选全不选代码