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. 使用jquery插件uploadify上传文件的方法与疑问

    我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...

  2. Problem 1008 Hay Points

    Problem Description Each employee of a bureaucracy has a job description - a few paragraphs that des ...

  3. MYSQL 时间计算的 3 种函数

    方法 1. 加法 adddate('date_expression',interval value type); 'date_expression' + interval value type; -- ...

  4. openjpa框架入门_openbooks项目Overview(四)

  5. (二)boost库之字符串格式化

    (二)boost库之字符串格式化 程序中经常需要用到字符串格式化,就个人而言还是比较倾向于C格式的输出,如果只是打印日志,printf就够了,如果到生成字符串,获取你可以选择sprintf,但这些都是 ...

  6. _declspec(dllexport)与_declspec(dllimport)

    __declspec(dllexport)2009-03-04 17:25 我相信写WIN32程序的人,做过DLL,都会很清楚__declspec(dllexport)的作用,它就是为了省掉在DEF文 ...

  7. cf466B Wonder Room

    B. Wonder Room time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. linux之SQL语句简明教程---AND OR

    在上一页中,我们看到 WHERE 指令可以被用来由表格中有条件地选取资料. 这个条件可能是简单的 (像上一页的例子),也可能是复杂的.复杂条件是由二或多个简单条件透过 AND 或是 OR的连接而成.一 ...

  9. Quartz框架的使用

    专用词汇:scheduler:任务调度器trigger:触发器,用于定义任务调度时间规则job:任务,即被调度的任务misfire:错过的,指本来应该被执行但实际没有被执行的任务调度 Quartz核心 ...

  10. Swift中元组(Tuples),结构体(Struct),枚举(Enums)之间的区别

    Swift有许多种存储数据方式,你可以用枚举(enums),元组(tuples),结构体(structs),类(classes),在这篇文章中我们将比较枚举.元组.结构体之间区别,首先从最简单的开始- ...