avalon js實現checkbox全選

時間 2019-12-02

標籤 avalon 實現 checkbox 全選欄目 JavaScript 简体版

原文原文鏈接

轉載請註明： TheViper http://www.cnblogs.com/TheViper javascript

duplex雙工綁定是avalon綁定裏面最有趣的一個，由於它在內部幫開發者作了不少事，讓開發者寫的代碼減小，代碼更優雅。下面隨便演示一個常見的checkbox全選。css

要求:（老掉牙了，仍是說一下）html

1.勾選了全選框後，下面的子選框全被勾選；沒勾選全選框，則子選框所有不勾選java

2.子選框若是有一個未勾選，則取消全選框勾選；數組

3.子選框所有勾選，則勾選全選框ui

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #wrap{
        margin-left: 100px;
    }
    #wrap li{
        display: inline-block;
        *display: inline;
        zoom:1;
        vertical-align: middle;
    }
</style>
<script type="text/javascript" src='seed.js'></script>
</head>
<body>
    <div id='wrap' ms-controller='duplex'>
        <p><input type='checkbox' data-duplex-changed="select_all_cb" ms-duplex-checked='select_all'>全選</p>
        <ul>
            <li ms-repeat='list'>
                <input type='checkbox' ms-duplex-number="selected" ms-attr-value='el.id'>{{el.text}}
            </li>
        </ul>
        <p>選中項的id:{{selected}}</p>
    </div>
    <script type="text/javascript">
    require('avalon',function(avalon){
        var duplex=avalon.define('duplex',function(vm){
            vm.selected=[];//保存勾選的選項的id,方便傳給後臺
            vm.list=[{id:1,text:'aaa'},{id:2,text:'bbb'},{id:3,text:'ccc'},{id:4,text:'ddd'},{id:5,text:'eee'},{id:6,text:'fff'}];
            vm.select_all_cb=function(){//全選框change事件回調
                var list=duplex.list,selected=duplex.selected;
                if(this.checked){
                    avalon.each(list,function(i,v){//循環保存着已經勾選選框的數據
                        selected.ensure(v['id']);//若是裏面沒有當前選框的數據，就保存
                    });
                }else
                    selected.clear();//清空
            };
            vm.select_all=0;
        });
        duplex.selected.$watch('length',function(after){//監聽保存數據數組的變化
            var len=duplex.list.length;            
            if(after==len)//子選框所有被勾選
                duplex.select_all=1;
            else//子選框有一個沒有被勾選
                duplex.select_all=0;
        });
        avalon.scan();
    });
    </script>
</body>
</html>