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并发编程之volatile变量
volatile提供了弱同步机制,用来确保将变量更新通知到其它线程.volatile变量不会被缓存在寄存器中或者对其它处理器不可见的地方,因此在读取volatile变量时总会返回最新写入的值.可以想象 ...
- Java数组的复制
初学Java的时候,需要复制数组的时候,一下子就想到使用赋值语句“=”,例如:array1 = array2:但后来慢慢发现,这个语句并不能将array2的内容复制给array1,而是将array2的 ...
- JS判断邮箱格式
function check(){ var strText=$("#email").val(); var strReg=/^\w+((-\w+)|(\.\w+))*\@ ...
- Retrofit的使用
参照文档:http://gank.io/post/56e80c2c677659311bed9841 一.创建Retrofit mRetrofit = new Retrofit.Builder() .b ...
- PHP配置xdebug
其实已经做PHP超过2年了,但是今天特别有感触,所以把过程写在这里 环境是win7+apache2.2+php5.3,因为某种原因,必须使用这个版本. 然后就死活配置不出来.apache日志如下: [ ...
- Linux下静态编译Qt程序
一般情况下,我们用Qt编译出来的程序是要依赖于系统Qt库的,也就是这个程序移到别的没有安装Qt库的系统上是不能使用的.会提示缺少……库文件之类的错误.这就是动态编译的结果. 但是如果我们想编译一个程序 ...
- 【额 原来ms sqlserver 中的视图果然是“虚表”哈】
在视图中查询数据的时候,会不会使用实体表中的列上的索引呢?会 .... 测试结果 测试脚本 ; BEGIN INSERT INTO Teachers ( TeacherName, Sex, Money ...
- FPGA的SPI从机模块实现
一. SPI总线协议 SPI(Serial Peripheral Interface)接口,中文为串行外设接口.它只需要3根线或4根线即可完成通信工作(这里讨论4根线的情况). ...
- android安卓开发问题集 XMPP篇
1.消息推送查了下资料,后面还是使用了androidpn (1)java.security.KeyStoreException: KeyStore jks implementation not fou ...
- linux之SQL语句简明教程---AND OR
在上一页中,我们看到 WHERE 指令可以被用来由表格中有条件地选取资料. 这个条件可能是简单的 (像上一页的例子),也可能是复杂的.复杂条件是由二或多个简单条件透过 AND 或是 OR的连接而成.一 ...