快捷導(dǎo)航

javascript使用avalon綁定實(shí)現(xiàn)checkbox全選

更新時(shí)間：2015年05月06日 08:43:33 投稿：hebedich

checkbox全選應(yīng)該是一個(gè)比較實(shí)用的前端技巧吧，很多時(shí)候我們都需要點(diǎn)擊一個(gè)checkbox，然后將所有的復(fù)選框自動(dòng)全部選中，一些CMS系統(tǒng)的后臺(tái)中，使用本JS效果后，會(huì)大大增強(qiáng)了操作體驗(yàn)，那么究竟是如何實(shí)現(xiàn)這一功能的呢？

duplex雙工綁定是avalon綁定里面最有趣的一個(gè)，因?yàn)樗趦?nèi)部幫開發(fā)者做了很多事，讓開發(fā)者寫的代碼減少，代碼更優(yōu)雅。下面隨便演示一個(gè)常見的checkbox全選。

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

1.勾選了全選框后，下面的子選框全被勾選；沒勾選全選框，則子選框全部不勾選

2.子選框如果有一個(gè)未勾選，則取消全選框勾選；

3.子選框全部勾選，則勾選全選框

<!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>選中項(xiàng)的id:{{selected}}</p>
  </div>
  <script type="text/javascript">
  require('avalon',function(avalon){
    var duplex=avalon.define('duplex',function(vm){
      vm.selected=[];//保存勾選的選項(xiàng)的id,方便傳給后臺(tái)
      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事件回調(diào)
        var list=duplex.list,selected=duplex.selected;
        if(this.checked){
          avalon.each(list,function(i,v){//循環(huán)保存著已經(jīng)勾選選框的數(shù)據(jù)
            selected.ensure(v['id']);//如果里面沒有當(dāng)前選框的數(shù)據(jù)，就保存
          });
        }else
          selected.clear();//清空
      };
      vm.select_all=0;
    });
    duplex.selected.$watch('length',function(after){//監(jiān)聽保存數(shù)據(jù)數(shù)組的變化
      var len=duplex.list.length;      
      if(after==len)//子選框全部被勾選
        duplex.select_all=1;
      else//子選框有一個(gè)沒有被勾選
        duplex.select_all=0;
    });
    avalon.scan();
  });
  </script>
</body>
</html>

效果

需要說明幾點(diǎn)：

1.data-duplex-changed負(fù)責(zé)監(jiān)聽checkbox的變化，進(jìn)而觸發(fā)回調(diào)。

2.ms-duplex-number="selected"這個(gè)就是神器，selected數(shù)組是和子選項(xiàng)框同步的，互相影響。也就是說，selected數(shù)組的元素個(gè)數(shù)增加或減少，會(huì)更新相應(yīng)子選項(xiàng)框的視圖，反之亦然。

3.ms-duplex-*需要與checkbox value屬性值的類型相同，否則無法同步視圖。像這里，checkbox value值是數(shù)字，則用ms-duplex-number。

4.checkbox value屬性值的類型有時(shí)不要想當(dāng)然的去判定。本屌就遇到過，明明從后臺(tái)傳過來的是id數(shù)字，卻無法同步視圖，最后改成ms-duplex-string才解決問題。所以'7'還是7,要判斷清楚。

從這個(gè)小例子可以看到用avalon這類mvvc是多么的提升編碼體驗(yàn)，如果不用，想想要寫多少個(gè)for循環(huán)+if判斷！

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: