js控制复选框

最新推荐文章于 2024-05-16 09:09:56 发布

蓝莲花Demo

最新推荐文章于 2024-05-16 09:09:56 发布

阅读量292

点赞数

分类专栏： HTML

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

    <!doctype html>  
    <html lang="cn">  
     <head>  
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>  
      <title>复选框全选、全不选、反选、必选一个</title>  
       <script type="text/javascript">  
            //全选  
            function selectAll() {  
                var names = document.getElementsByName("bjjb");                             
                for(var i=0;i<names.length;i++){  
                        names[i].checked=true;  
                 }        
            }  
      
            //全不选  
            function selectNone() {  
                var names = document.getElementsByName("bjjb");                             
                for(var i=0;i<names.length;i++){  
                        names[i].checked=false;  
                 }        
            }  
              
             //反选  
            function selectInvert() {  
                var names = document.getElementsByName("bjjb");                                 
                for(var i=0;i<names.length;i++){  
                        if(names[i].checked){  
                            names[i].checked=false ;  
                        }else{  
                            names[i].checked=true ;  
                        }  
                    }  
            }  
             
             //必须选择一个  
            function selectOne() {  
                var names = document.getElementsByName("bjjb");            
                var flag = false ;//标记判断是否选中一个                 
                for(var i=0;i<names.length;i++){  
                    if(names[i].checked){  
                            flag = true ;  
                            break ;  
                     }  
                 }  
                 if(!flag){  
                    alert("请最少选择一项！");  
                    return false ;  
                 }  
            }  
      
       </script>  
     </head>  
     <body>  
        <form id="checkboxform" method="post" action="">  
            <input type="checkbox" name="bjjb" value="1">交通事故<br>  
            <input type="checkbox" name="bjjb" value="2">自然灾害<br>  
            <input type="checkbox" name="bjjb" value="3">恶劣天气<br>  
            <input type="checkbox" name="bjjb" value="4">严重违法行为<br>  
            <input type="checkbox" name="bjjb" value="5">路面损毁<br>  
            <a href="javascript:void(0);"  οnclick="selectAll()">全选</a>   
            <a href="javascript:void(0);" οnclick="selectNone()">全不选</a>   
            <a href="javascript:void(0);" οnclick="selectInvert()">反选</a>   
            <a href="javascript:void(0);" οnclick="selectOne()">必须选择一个</a>   
         </form>  
     </body>  
    </html>