全选与非全选

最新推荐文章于 2022-02-15 14:20:56 发布

hongc93

最新推荐文章于 2022-02-15 14:20:56 发布

阅读量275

点赞数

分类专栏： avalon 文章标签：全选

本文链接：https://blog.csdn.net/hongc93/article/details/54575319

版权

avalon 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>array</title>
</head>
<body>
<script src="../js/avalon2.2.js"></script>
<script>
    var vm = avalon.define({
        $id: 'selected',
        allSelected: false,
        tdInfo: [
            {
                selected: false,
                info: '111'
            },
            {
                selected: false,
                info: '22'
            },
            {
                selected: true,
                info: '333'
            },
        ],
        allClick: function (e) {
//            avalon.log(e.target.checked);
            vm.tdInfo.forEach(function (el) {
                el.selected = e.target.checked
            })
        },
        oneClick: function (e) {
            if (e.target.checked == false) {
                vm.allSelected = false;
            } else {
                vm.allSelected = vm.tdInfo.every(function (el) {
                    return el.selected
                })
            }
        }
    });
</script>
<div style="width: 500px; margin: 0 auto;" ms-controller="selected">
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" ms-duplex-checked="allSelected" data-duplex-changed="allClick">{{@allSelected}}全选
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ms-for="(key,val) in @tdInfo">
            <td><input type="checkbox" ms-duplex-checked="val.selected" data-duplex-changed="oneClick">{{val.info}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

hongc93

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
全选与非全选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale
复制链接

扫一扫