Knockoutjs——checkbox全选

浏览数：51 / 时间：2015年06月09日

一、前言

楼主大一党，是个小菜鸟。之前做的项目都是用第三方控件做的，最近开始学习用MVC、EasyUI和Knockoutjs等，可能下面有些地方写的不好，请大家多多包涵。

二、内容

首先我们要了解一下基本的Knockoutjs绑定，这个我就不多说了大家可以看Tom大叔和Y-Z-F博客。

我是新建了一个table，主要内容有如下：

<table align="center">
    <thead>
        <tr>
            <th width="3%"></th>
            <th width="20%">新闻名称</th>
            <th width="20%">作者</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: News"><!--foreach:News是用来获取数组数据-->
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: checks"><!--checked绑定checkbox-->
            </td>
            <td data-bind="text: Title"></td><!--text 绑定显示对应的title值-->
            <td data-bind="text: UsersName"></td>
        </tr>
    </tbody>
    <tr>
        <td>
            <input type="checkbox" data-bind="checked: selectall"></td>
        <td>全选</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

注：对text box，drop-down list和所有non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。（套用手册里面的话）

如上绑定结束之后就是用如下代码来实现：

$(function () {
        var viewModel = {
            selectall: ko.observable(false),
            News: ko.observableArray(
                   [
                       { checks:false,Title: ‘this is Title‘, UsersName: ‘cccccc‘ },
                       { checks:false,Title: ‘hahahhahaha‘, UsersName: ‘ssssss‘ }
                   ]
           )
        };
        //监听
        viewModel.selectall.subscribe(function (nvalue) { //subscribe是监控属性显示订阅,通过nvalue判断全选是选中，还是没选中
            if (nvalue) {                               //如果选中
                var s = viewModel.News();
                viewModel.News([]);
                for (var i = 0; i < s.length; i++) {   
                    s[i].checks = true;                //则将列表中的check设置为true
                }
                viewModel.News(s);
            } else {                                  //如果没选
                var s = viewModel.News();
                viewModel.News([]);
                for (var i = 0; i < s.length; i++) {
                    s[i].checks = false;              //则将列表中的check设置为false
                }
                viewModel.News(s);                   
            }
        });
        ko.applyBindings(viewModel);
    });