全选与非全选

最新推荐文章于 2025-05-29 09:06:18 发布

原创最新推荐文章于 2025-05-29 09:06:18 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#全选

avalon 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Avalon.js框架实现网页表格中全选和单选的功能，并通过双向绑定简化操作流程。该示例展示了如何通过监听复选框状态变化来更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>