编写一个完整的表格列表内容中复选框的全选、反选效果

最新推荐文章于 2023-10-23 15:44:26 发布

我的大男子主义

最新推荐文章于 2023-10-23 15:44:26 发布

阅读量793

点赞数 3

分类专栏： web前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/lf1949/article/details/123465131

版权

web前端专栏收录该内容

13 篇文章 5 订阅

订阅专栏

编写一个完整的表格列表内容中复选框的全选、反选效果

结果预览
代码展示

结果预览

请添加图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>



        window.onload=function (){
            var nums=document.getElementsByName("number");
            var selall=document.getElementById("all");
            var selnot=document.getElementById("not");

            //全选
            selall.onclick=function (){
                for (var i=0;i<nums.length;i++){
                    nums[i].checked=selall.checked;
                }
            }

            //反选
            selnot.onclick=function (){
                for(var i=0;i<nums.length;i++){
                    if (nums[i].checked==true){
                        nums[i].checked=false;
                    }else{
                        nums[i].checked=true;
                    }
                }
            }


            //全选是否选中状态（只要有一个子项没选中则取消全选，只要子项全部选中自动选中全选）

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

                nums[i].onclick=function (){
                    //只要有一个子项没选中，取消全选
                    if(!this.checked){
                        selall.checked=false;
                    }

                    //只要所有子项选中，自动选中全选
                    var count=0;
                    for(var i=0;i<nums.length;i++){
                        if(nums[i].checked==true){
                            count++;
                        }
                    }
                    if(count==10){
                        selall.checked=true;
                    }
                }
            }
        }




    </script>
</head>
<body>
<table border="1" id="select">
    <tr bgcolor="#bdb76b">
        <td > <input type="checkbox" id="all" >全选</input>  </td>
        <td width="400" align="center"> 复选框全选示例</td>
        <td width="20"> </td>
        <td width="20"> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="1" name="number" >1</input>  </td>
        <td> 作用：</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="2" name="number" >2</input>  </td>
        <td> a.单击列头复选框全选或全部选子项</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="3" name="number" >3</input>  </td>
        <td> b.只要有一个子项没有选中，则取消列头的选中状态</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="4" name="number" >4</input>  </td>
        <td> c.当所有子项目选中时，列头复选框自动置为选中状态</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="5" name="number" >5</input>  </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="6" name="number" >6</input>  </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="7" name="number" >7</input>  </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="8" name="number" >8</input>  </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="9" name="number" >9</input>  </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <input type="checkbox" id="10" name="number" >10</input>  </td>
        <td> d.将复选框反过来选</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr bgcolor="aqua">
        <td> <input type="checkbox" id="not" >反选</input>  </td>
        <td align="center"> 反选示例</td>
        <td> </td>
        <td> </td>
    </tr>

</table>
</body>
</html>

我的大男子主义

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
编写一个完整的表格列表内容中复选框的全选、反选效果

编写一个完整的表格列表内容中复选框的全选、反选效果结果预览代码展示结果预览代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function (){ var nums=docum
复制链接

扫一扫