knockout 与checkbox联动
knockout 通过teplate实现简单的代码实现复杂的操作绑定checkbox,代码如下自我感觉很赞!!!
前台HTml
<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }">
</ul>
<script id="choiceTmpl" type="text/html">
< li > <input type = "checkbox"data - bind = "attr: { value: $data }, checked: $item.selections" / ><span data - bind = "text: $data" > </span> </li >
</script>
<hr />
<div data-bind="text: ko.toJSON(selectedChoices)">
</div>
<hr />
<div data-bind="text: selectedChoicesDelimited">
</div>
前台JS
var viewModel = { choices: ["one", "two", "three", "four", "five"], selectedChoices: ko.observableArray(["two", "four"]) };
viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { return this.selectedChoices().join(","); }, viewModel);
ko.applyBindings(viewModel);
在线Fiddle演示如下
http://jsfiddle.net/rniemeyer/Jm2Mh/
knockout 与checkbox联动的更多相关文章
- TreeView checkbox
C# TreeView checkbox 联动打勾 #region 将树的checkbox选中 private void setNodeTrue(Node selNode) { Node node = ...
- [extjs] ExtJS4 treepanel 子节点选中父节点自动选中,选中父节点 子节点自动全部选中
ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...
- day 46 html 学习 列 表格,
列表 1.无序列表 <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul ...
- label联动checkbox
label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.
- knockout checkbox 全选
knockout checkbox 全选 <input type=checkbox data-bind="checked:IsAll"/>全选 <ul data- ...
- 在vue中如何实现购物车checkbox的三级联动
最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...
- React实现checkbox group多组选项和标签组显示的联动
实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...
- ztree checkbox父子联动
1. 对于ztree而言,如果需要设置或者取消ztree的父子联动,只要在setting里面设置chkboxType的参数即可: 其中Y表示被checkbox被勾选时的联动情况,N表示取消勾选时的联动 ...
- TreeView CheckBox勾选联动
http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...
随机推荐
- 认识Java数组(一)
特别想喜欢一个寓言故事: 噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表面现象,只有亲自试过了,才知道它的深浅!!!!! 言归正传: ...
- 放大镜效果之js
HTML代码: div.box>div#left+div#buttom+div#right div#left>img div#buttom>div.small>img CSS代 ...
- ssh username@10.2.1.23无法连接
ssh username@10.2.1.23无法连接 经过排查各种openSSH版本等,最终因为两个机器不是一个段(A:255.255.0.0 B:255.255.255.0)造成的. 关于IP需要以 ...
- PHP header() http各种状态码大全查询
PHP header()the function declaration: void header ( string string [, bool replace [, int http_respon ...
- FFMPEG图片转视频
1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an output_file_video //分离视频流 ffmpeg -i input_file -acod ...
- UVA 1572 Self-Assembly
拓扑排序,以边上标号为点,正方形为边,拓扑图中存在有向环时unbounded,否则bounded: 注意:仔细处理输入: 遍历一个点时,下一次遍历拼上的下一个方形边:即假设遍历到 A+ 时,下次从 ...
- python 解释器内建函数001
python解释器内建函数列表如下: 001.abs() 求绝对值 #!/usr/bin/python if __name__=="__main__": print(abs(-10 ...
- Nginx 变量漫谈(四)
在设置了“取处理程序”的情况下,Nginx 变量也可以选择将其值容器用作缓存,这样在多次读取变量的时候,就只需要调用“取处理程序”计算一次.我们下面就来看一个这样的例子: map $args ...
- ISSkin 使用技巧,WinXP 下的窗口阴影
原文 http://restools.hanzify.org/article.asp?id=109 是否觉得在使用 ISSkin 的时候感觉窗口太过平板,尤其对于那些窗口边缘和窗口内部颜色一致的皮肤尤 ...
- ZZ的计算器
Problem Description ZZ自从上大学以来,脑容量就是以SB计算的,这个吃货竟然连算术运算也不会了,可是当今的计算机可是非常强大的,作为ACMer, 几个简单的算术又算得了什么呢?可是 ...