表格全选效果实现

最新推荐文章于 2023-12-29 12:09:13 发布

SC200203

最新推荐文章于 2023-12-29 12:09:13 发布

阅读量52

点赞数

分类专栏：动态网页项目开发文章标签： javascript

本文链接：https://blog.csdn.net/SC200203/article/details/124081392

版权

动态网页项目开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <head lang="en">
        
        
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .wrap {
                width: 300px;
                margin: 100px auto 0;
            }
            
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                width: 300px;
            }
            
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
            
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
            
            td {
                font: 14px "微软雅黑";
            }
            
            tbody tr {
                background-color: #f0f0f0;
            }
            
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
        </style>
    
   
    
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- 开始默认补选中 checked="checked" -->
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>

        var j_cbAll=document.getElementById('j_cbAll');
               var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
                   j_cbAll.onclick=function(){
                   for ( var i=0;i<j_tbs.length;i++){
                       j_tbs[i].checked=this.checked;
                   }
               }
                 for(var i=0;i<j_tbs.length;i++){
                  for(var i=0;i<j_tbs.length;i++){
                   if(!j_tbs[i].checked){
                       j_tbs[i].checked=false;
                       console.log(j_tbs[i].checked);
                   }
               }
               j_cbAll.checked=false;
                }
          </script>
       
</body>
</html>

SC200203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格全选效果实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫