首页 > 代码库 > js 判断 复选框全选、全不选、反选、必选一个

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选、全不选、反选、必选一个

记录下, 搬来的

思路:

修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态

 

<html>
    <head>
        <title>
            复选框全选、全不选、反选、必选一个
        </title>
        <meta http-equiv="content-type" content="text/html;charset=GBK"/>
        <script language="javascript">
            //表单验证
            function check(){                
                var ids = document.getElementsByName("ids");                
                var flag = false ;                
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked){
                        flag = true ;
                        break ;
                    }
                }
                if(!flag){
                    alert("请最少选择一项!");
                    return false ;
                }
            }
            //全选
            function iselect(){ //其中函数字不能为select 其为JS保留字
                var ids = document.getElementsByName("ids");
                var all = document.getElementById("all");                
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=all.checked;
                }
            }
            //全选
            function selectAll(){
                var ids = document.getElementsByName("ids");                            
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=true;
                }
            }
            //全不
            function selectNone(){
                var ids = document.getElementsByName("ids");                            
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=false;
                }
            }
            //反选
            function selectInvert(){
                var ids = document.getElementsByName("ids");                            
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked)
                        ids[i].checked=false ;
                    else
                        ids[i].checked=true ;
                }
            }
        </script>
    </head>
    <body>
        <form action="#" onsubmit="return check();">
        <table border="0">
            <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
            <tr><td><input type="checkbox" name="ids">音乐</td></tr>
            <tr><td><input type="checkbox" name="ids">短信</td></tr>
            <tr><td><input type="checkbox" name="ids">图片</td></tr>
            <tr><td><input type="checkbox" name="ids">电子书</td></tr>
            <tr><td><input type="checkbox" name="ids">铃声</td></tr>
            <tr><td><input type="checkbox" name="ids">漫画</td></tr>
            <tr><td><input type="checkbox" name="ids">游戏</td></tr>
            <tr><td><input type="checkbox" name="ids">杂志</td></tr>
            <tr><td><input type="checkbox" name="ids">新闻</td></tr>
            <tr>
                <td>
                    <a href="http://www.mamicode.com/#" onclick="selectAll();">全选</a>&nbsp;
                    <a href="http://www.mamicode.com/#" onclick="selectNone();">全不</a>&nbsp;
                    <a href="http://www.mamicode.com/#" onclick="selectInvert();">反选</a>
                </td>
            </tr>
            <tr><td><input type="submit" value="http://www.mamicode.com/提交"></td></tr>
        </table>
        </form>
    </body>
</html>

 

<html> <head> <title> 复选框全选、全不选、反选、必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <script language="javascript"> //表单验证 function check(){ var ids = document.getElementsByName("ids"); var flag = false ; for(var i=0;i<ids.length;i++){ if(ids[i].checked){ flag = true ; break ; } } if(!flag){ alert("请最少选择一项!"); return false ; } } //全选 function iselect(){ //其中函数字不能为select 其为JS保留字 var ids = document.getElementsByName("ids"); var all = document.getElementById("all"); for(var i=0;i<ids.length;i++){ ids[i].checked=all.checked; } } //全选 function selectAll(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ ids[i].checked=true; } } //全不 function selectNone(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ ids[i].checked=false; } } //反选 function selectInvert(){ var ids = document.getElementsByName("ids"); for(var i=0;i<ids.length;i++){ if(ids[i].checked) ids[i].checked=false ; else ids[i].checked=true ; } } </script> </head> <body> <form action="#" onsubmit="return check();"> <table border="0"> <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr> <tr><td><input type="checkbox" name="ids">音乐</td></tr> <tr><td><input type="checkbox" name="ids">短信</td></tr> <tr><td><input type="checkbox" name="ids">图片</td></tr> <tr><td><input type="checkbox" name="ids">电子书</td></tr> <tr><td><input type="checkbox" name="ids">铃声</td></tr> <tr><td><input type="checkbox" name="ids">漫画</td></tr> <tr><td><input type="checkbox" name="ids">游戏</td></tr> <tr><td><input type="checkbox" name="ids">杂志</td></tr> <tr><td><input type="checkbox" name="ids">新闻</td></tr> <tr> <td> <a href="http://www.mamicode.com/#" onclick="selectAll();">全选</a>&nbsp; <a href="http://www.mamicode.com/#" onclick="selectNone();">全不</a>&nbsp; <a href="http://www.mamicode.com/#" onclick="selectInvert();">反选</a> </td> </tr> <tr><td><input type="submit" value="http://www.mamicode.com/提交"></td></tr> </table> </form> </body> </html>

js 判断 复选框全选、全不选、反选、必选一个