复选框的全选、取消

最新推荐文章于 2019-08-12 21:56:39 发布

leedaning

最新推荐文章于 2019-08-12 21:56:39 发布

阅读量535

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/leedaning/article/details/49740285

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

复选框的全选、取消，这个是根据网上的一篇文章完善而来的，希望可以帮助到有需要的朋友！

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>复选框全选/取消</title> 
        <script type="text/javascript" language="javascript"> 
            function selectAllDels() { 
                var allCheckBoxs = document.getElementsByName("singleCheck"); 
                var desc = document.getElementById("allChecked"); 
                var selectOrUnselect=true; 
                for(var i = 0; i < allCheckBoxs.length; i ++ ) 
                { 
                    if(allCheckBoxs[i].checked==false){ 
                        selectOrUnselect=false; 
                        break; 
                    } 
                } 
                if (selectOrUnselect) 
                { 
                    _allUnchecked(allCheckBoxs); 
                }else{ 
                    _allchecked(allCheckBoxs); 
                } 
            } //end func selectAllDels() 

            function _allchecked(allCheckBoxs){ 

                for(var i = 0; i < allCheckBoxs.length; i ++ ){ 

                    allCheckBoxs[i].checked = true; 
                } 

            } //end func _allchecked()

            function _allUnchecked(allCheckBoxs){ 

                for(var i = 0; i < allCheckBoxs.length; i ++ ){ 

                    allCheckBoxs[i].checked = false; 
                } 

            } //end func _allUnchecked()

            function everyOnClilck(){

                var allCheckBoxs = document.getElementsByName("singleCheck"); 
                var desc = document.getElementById("allChecked"); 
                var identical=true; 

                for(var i = 0; i < allCheckBoxs.length; i ++ ) 
                { 
                    if(allCheckBoxs[i].checked==false){ 
                        identical=false; 
                        break; 
                    } //end if()
                } //end for()

                if (identical) {

                    desc.checked = true;
                }else{

                    desc.checked = false;
                }//end if()

            }//end func everyOnClilck()
        </script> 
    </head> 

    <body> 

        <form> 
            <input type="checkbox" name="singleCheck" onClick="everyOnClilck()" value="single">ID1</br>

            <input type="checkbox" name="singleCheck" onClick="everyOnClilck()" value="single" >ID2</br>

            <input type="checkbox" name="singleCheck" onClick="everyOnClilck()" value="single">ID3</br>

            <input type="checkbox" name="singleCheck" onClick="everyOnClilck()" value="single">ID4</br>

            <input type="checkbox" name="singleCheck" onClick="everyOnClilck()" value="single">ID5</br> 

            <input type="checkbox" id="allChecked" onClick="selectAllDels()" value="全选">全选
        </form> 

    </body> 
</html>

Author:leedaning
本文地址：http://blog.csdn.net/leedaning/article/details/49740285

leedaning

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复选框的全选、取消

复选框的全选、取消，这个是根据网上的一篇文章完善而来的，希望可以帮助到有需要的朋友！<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选/取消</title> <script type="text/
复制链接

扫一扫

专栏目录