用js判断一个复选框是否被选中

最新推荐文章于 2023-12-11 13:30:16 发布

chuchuan9091

最新推荐文章于 2023-12-11 13:30:16 发布

阅读量416

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/guobao6/blog/3083083

版权

<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.getElementByIdx_x_x("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="#" onclick="selectAll();">全选</a>&nbsp;
                    <a href="#" onclick="selectNone();">全不</a>&nbsp;
                    <a href="#" onclick="selectInvert();">反选</a>
                </td>
            </tr>
            <tr><td><input type="submit" value="提交"></td></tr>
        </table>
        </form>
    </body>
</html>

转载于:https://my.oschina.net/guobao6/blog/3083083