CSS与js--全选功能

最新推荐文章于 2023-08-03 09:03:47 发布

rong_code

最新推荐文章于 2023-08-03 09:03:47 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/zhang__rong/article/details/83655825

版权

本文介绍如何使用CSS和JavaScript来实现网页上的全选功能。通过简单的代码示例，展示了如何绑定事件监听器，以及如何操作DOM元素的checked属性以达到全选或全不选的效果。

摘要由CSDN通过智能技术生成

  <!DOCTYPE html>
     <html lang="en">
         <head>
         <meta charset="UTF-8">
         <title>Title</title>
         <script>
         function first() {
         var as=document.getElementsByName("one");
         var a1=document.getElementById("two");
         for (var i=0;i<as.length;i++){
             as[i].checked=a1.checked;
         }
     }
     function  cheaked() {
         var count =0;
         var aa=document.getElementById("two");
         var aa1=document.getElementsByName("one");
         for(var i=0;i<aa1.length;i++){
             if(aa1[i].checked){
                 count+=1;
                 if(count == aa1.length){
                     aa.checked=true;
                 }else {
                     aa.checked=false;
                 }
             }
         }
     }

    </script>
</head>
<body>
全选<input type="checkbox" id="two" onclick="first()">
<table border="1px" width="500px" height="100px" onchange="cheaked()">
    <tr>
        <td>选择</td>
        <td>姓名</td>
        <td>证件类型</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" onclick="cheaked()" ></td>
        <td>用户1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="one" onclick="cheaked()"></td>
        <td>用户2</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
代码实现：