表单的全选和取消全选

最新推荐文章于 2024-02-19 10:04:26 发布

是yx啊啊啊啊

最新推荐文章于 2024-02-19 10:04:26 发布

阅读量112

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yxyx0614/article/details/122441851

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=script, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .a {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border-collapse: collapse;
        }

       td,th {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <table class="a">
        <thead>
        <tr>
            <th class='b'>
                <input type="checkbox" id='mm'>
            </th>
            <th>
                商品
            </th>
            <th>
                价钱
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="c">
                <input type="checkbox">
            </td>
            <td>
                iphoneB
            </td>
            <td>
                8000
            </td>
        </tr>
        <tr>
            <td class="d">
                <input type="checkbox" >
            </td>
            <td>
                ipad pro
            </td>
            <td>
                5000
            </td>
        </tr>
        <tr>
            <td class="e">
                <input type="checkbox">
            </td>
            <td>
                ipad air
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td class="f">
                <input type="checkbox" >
            </td>
            <td>
                apple watch
            </td>
            <td>
                2000
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        var th=document.getElementById('mm');
        var td=document.querySelector('tbody').querySelectorAll('input');
        th.onclick=function(){
            for(var i=0;i<td.length;i++){
                td[i].checked=this.checked;
            }
        }
            for(var j=0;j<td.length;j++){
                td[j].onclick=function(){
                var flag=true;
                for(var a=0;a<td.length;a++){
                    if(!td[a].checked){
                        flag=false;
                    }
                }
                th.checked=flag;
            }
        }
       
    </script>
</body>

</html>

实现的效果：