javascript复选框，全选或全不选

最新推荐文章于 2023-07-07 16:55:54 发布

java庞

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量193

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_44899752/article/details/127285513

版权

Javascript 专栏收录该内容

4 篇文章 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>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                全选
                <input type="checkbox" id="all" onclick="check()">
            </td>
            <td>项目</td>
            <td>状态</td>
            <td>数量</td>
            <td>单价</td>
            <td>小计</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="title" id="" onclick="checkOne()">
            </td>
            <td>华为手机mate14</td>
            <td>正在出售</td>
            <td>10</td>
            <td>5000</td>
            <td>50000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="title" id="" onclick="checkOne()">
            </td>
            <td>小米14</td>
            <td>正在出售</td>
            <td>10</td>
            <td>3000</td>
            <td>30000</td>
        </tr>
    </table>
</body>

<script>
    //全选
    function check(){
        //先获取选项按钮
        var checkall = document.getElementById("all")
        //获取所有商品的复选框
        var ches = document.getElementsByName("title")
        for(var i =0;i<ches.length;i++){
            ches[i].checked = checkall.checked
        }
    }

//单个选择
    function checkOne(){
        var checked = 0;//选择
        var notchecked = 0;//取消选择
        //先获取选项按钮
        var checkall = document.getElementById("all")
         //获取所有商品的复选框
        var ches = document.getElementsByName("title")
        for(var i =0;i<ches.length;i++){
            if(ches[i].checked){//判断是否已选择
                checked++;
            }else{
                notchecked++;
            }
        }
        if(checked == ches.length){
            checkall.checked=true;
        }else if(notchecked==ches.length){
            checkall.checked=false;
        }else{
            checkall.checked=false;
        }

    }

</script>
</html>