JS实现复选框的全选/全不选

最新推荐文章于 2024-04-26 16:47:03 发布

幼儿园老大~~

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_60485096/article/details/130689482

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表格内容

实现思路

定义函数myAll()，获取参数（全选的id，每一个分支的name），利用input的checked属性实现

checked属性借鉴链接（可以自行搜索了解）checked属性

代码展示

<!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>实现复选框的全选/全不选</title>
</head>
<script>
// 点击全选按钮所有复选框状态为选中，再次点击取消全选
    function myAll(){
        var all= document.getElementById("all");
        var list = document.getElementsByName("onelist");
        for(var i=0; i<=list.length; i++){
            list[i].checked = all.checked;
        }
    }
//当所有的复选框选中时，全选按钮的状态变为选中
    function myOne(){
        var all= document.getElementById("all");
        var list = document.getElementsByName("onelist");
        for (var i=0; i<=list.length; i++){
            if (list[i].checked==false){
                all.checked=false;
                return;
            }
            else{
                all.checked=true;
            }
        }
    }
</script>
<body>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th colspan="5">商品信息查看</th>
            
        </tr>
        <tr>
            <td>选择</td>
            <td>所属类别</td>
            <td>商品名称</td>
            <td>会员价</td>
            <td>数量</td>
            
        </tr>
        <tr>
            <td><input name="onelist" type="checkbox" onclick=myOne()></td>
            <td>手机</td>
            <td>P_L音乐手机</td>
            <td>1980</td>
            <td>200</td>
        </tr>
        <tr>
            <td><input name="onelist" type="checkbox" onclick="myOne()"></td>
            <td>玻璃制品</td>
            <td>迷你水杯</td>
            <td>49</td>
            <td>500</td>
        </tr>
        <tr>
            <td><input name="onelist" type="checkbox" onclick="myOne()"></td>
            <td>音响</td>
            <td>CXO音响</td>
            <td>2070</td>
            <td>200</td>
        </tr>
        <tr>
            <td><input name="onelist" type="checkbox" onclick="myOne()"></td>
            <td>休闲装</td>
            <td>休闲上衣</td>
            <td>195</td>
            <td>500</td>
        </tr>
        <tr>
            <td colspan="5"><input id="all" type="checkbox" onclick="myAll()">[全选/全部选]</td>
            
        </tr>
        
    </table>
</body>
</html>