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联动的更多相关文章

  1. TreeView checkbox

    C# TreeView checkbox 联动打勾 #region 将树的checkbox选中 private void setNodeTrue(Node selNode) { Node node = ...

  2. [extjs] ExtJS4 treepanel 子节点选中父节点自动选中,选中父节点 子节点自动全部选中

    ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...

  3. day 46 html 学习 列 表格,

    列表 1.无序列表 <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul ...

  4. label联动checkbox

    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.

  5. knockout checkbox 全选

    knockout checkbox 全选 <input type=checkbox data-bind="checked:IsAll"/>全选 <ul data- ...

  6. 在vue中如何实现购物车checkbox的三级联动

    最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...

  7. React实现checkbox group多组选项和标签组显示的联动

    实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...

  8. ztree checkbox父子联动

    1. 对于ztree而言,如果需要设置或者取消ztree的父子联动,只要在setting里面设置chkboxType的参数即可: 其中Y表示被checkbox被勾选时的联动情况,N表示取消勾选时的联动 ...

  9. TreeView CheckBox勾选联动

    http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...

随机推荐

  1. mysql 建表、查表、查表结构

    进入数据库: mysql> use sunshine_blog;输出: Database changed 查数据库表: mysql> show tables;输出: +---------- ...

  2. nginx,php日志分割

    作者:zhanhailiang 日期:2014-01-06 默认nginx只会生成一个access.log和一个error.log,并且每天不断积累,日志文件会变的非常大,如果需要做一下日志的分析,无 ...

  3. 在右键添加Cmder here选项,添加启动Cmder的快捷键

    右键菜单添加“Cmder here” 打开cmder,在其中输入: cmder /register user 或 cmder /register all 即可   设置启动cmder的快捷键 右键 C ...

  4. 【原创】QT5-卸载精灵v1.0-卸载windows软件-简易版

    由于项目需求,需要实现卸载windows上的普通软件的小功能,实现起来还是比较简单的. 先发个图: 思路: 1.根据注册表的信息去打开应用程序,卸载也一样: 2.读桌面的快捷方式,根据快捷方式的指向路 ...

  5. 记glide框架使用中所遇到的问题

    最近实在是太忙,每有时间写博客.记得之前写过一篇关于glide加载图片不显示的博客,但是给出最终的解决方法.这次我将把在项目中使用glide所遇到的问题总结一下. 1.使用glide最好对glide进 ...

  6. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  7. poj 1065 Wooden Sticks_贪心

    题意:将木棍放在机器里处理,第一根需要一分钟,剩余的如果大于等于前边放入的长度和重量,就不用费时间,否则需要一分钟,计算给出一组数的最少时间. 思路:先按长度排序,相同在比较重量,然后按顺序比较得出结 ...

  8. UML_静态图

    类图        类图是描述类,接口,协作以及它们之间关系的图,用来显示系统中各个类的静态结构.类图是定义其他图的基础,在类图的基础上,可以使用状态图,协作图,组件图和配置图等进一步描述系统其他方面 ...

  9. hdu 1078 FatMouse and Cheese_记忆搜索

    做这类型的搜索比较少,看懂题意花了半天 题意:给你个n*n的图,老鼠一次最远走k步,老鼠起初在(0,0),每次偷吃的东西必须比之前偷吃的要大. #include<iostream> #in ...

  10. web站点监控脚本web_status_code,tomcat 80,oracle1521

    1,完整的监控脚本如下 #!/bin/bash #web_status_code=`curl -o /dev/null -s -w "http_code:%{http_code}" ...