首页 > 代码库 > Knockoutjs——checkbox全选
Knockoutjs——checkbox全选
一、前言
楼主大一党，是个小菜鸟。之前做的项目都是用第三方控件做的，最近开始学习用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); });
其中显示的时候全选要为空，所以就我们就可以直接设置false
observableArray是数组所以上方用foreach绑定
注：上方绑定的名称一定要和下方统一，不然会显示不出来
结果如下：
Knockoutjs——checkbox全选
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。