用jq实现复复选框全选和个别选项

最新推荐文章于 2022-08-20 00:12:13 发布

偲楠爱前端

最新推荐文章于 2022-08-20 00:12:13 发布

阅读量379

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/ChenHN98/article/details/120998941

版权

HTML jQuery checkbox 事件监听状态同步

关键词由CSDN通过智能技术生成

难点：

如何在点击全选框之后每个选择框会被选中
如何在点击每个单机框之后全选框会被选中

<!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>
    <script src="jq.mini.js"></script>
<style>
   table,th,td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 100px auto;
        
    }
    th,td {
        width: 200px;
        height: 100px;
        text-align: center;
        
    }
    thead {
        background-color: cornflowerblue;
        color: white;
        font-size: 30px;
        font-weight: normal;
        font-family: 'Microsoft yahei';
    }
    tbody {
        background-color: gainsboro;
        font-size: 30px;
        font-weight: normal;
        font-family: 'Microsoft yahei';
    }
     tbody>tr:hover {
        background-color: white;
    } 
    /* .one {
        background-color: white;
    }  */
</style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="ck_all"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="ck_tbs">
              <tr>
                  <td><input type="checkbox" class="ck_tbss"></td>
                  <td>iphone4</td>
                  <td>4999</td>
              </tr>
              <tr>
                <td><input type="checkbox" class="ck_tbss"></td>
                <td>iphone5</td>
                <td>5660</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="ck_tbss"></td>
                <td>iphone6</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="ck_alll"></td>
                <td>结算</td>
                <td>----</td>
            </tr>
        </tbody>
    </table>
    <script>
       $(function () {
           $('#ck_all,#ck_alll').change(function () {//change事件一般用于text check
            console.log($(this).prop('checked'));//选中状态
            $('#ck_tbs input,#ck_all').prop('checked',$(this).prop('checked'))
           })
           //逐个点击选择全选框 用：checked 选择器
           $('.ck_tbss').change(function () {
            console.log($('.ck_tbss:checked').length);//选择器个数
            if($('.ck_tbss:checked').length==$(".ck_tbss").length) {
               $('#ck_all,#ck_alll').prop('checked',true)
           }else {
            $('#ck_all,#ck_alll').prop('checked',false)
           }
           })
       
    })
    </script>
</body>

</html>

偲楠爱前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jq实现复复选框全选和个别选项

难点：如何在点击全选框之后每个选择框会被选中如何在点击每个单机框之后全选框会被选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content...
复制链接

扫一扫