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单表大小的限制一.MySQL数据库的MyISAM存储 引擎单表大小限制已经不是有MySQL数据库本身来决定(限制扩大到64pb),而是由所在主机的OS上面的文件系统来决定了.在mysql5. ...

  2. Spring MVC一个方法适用多种调用方式

    web.xml spring-mvc.xml <mvc:annotation-driven /> <context:component-scan base-package=" ...

  3. 【转】mysql行列转换方法总结

    转:http://blog.chinaunix.net/uid-7692530-id-2567582.html 在某些数据库中有交叉表,但在MySQL中却没有这个功能,但网上看到有不少朋友想找出一个解 ...

  4. Django 模板中引用静态资源(js,css等)

    Django 模板中免不了要用到一些js和CSS文件,查了很多网页,被弄得略晕乎,还是官网靠谱,给个链接大家可以自己看英文的. https://docs.djangoproject.com/en/1. ...

  5. C# 几种常见的排序方法

    1.冒泡排序 //冒泡排序 public void BubbleSort(int[] list) { int i, j, temp; bool done = false; j = ; while (( ...

  6. QT:浮动的饼状统计图(自绘不规则窗口)

    昨天在玩手机游戏时,见到一个游戏的饼状投票统计图很漂亮,所以我今天也花了一个下午来实现了一个类似的程序娱乐一下,呵呵. 思路:1:将窗体设为Qt::FramelessWindowHint和Qt::WA ...

  7. hdu 2102 A计划_bfs搜索

    题意:略 思路:此题陷阱超多,当##,#*,*#时不能走进去,套下模板就行了. #include <iostream> #include<cstdio> #include< ...

  8. SEO,你敢说你会吗?

    SEO从何開始学起?SEO基础知识我们须要掌握哪些?SEO是什么?SEO究竟要怎么做?这些问题无时无刻不在困惑着我们.就我个人一些小观点来谈谈一个站点优化的大致步骤. SEO初期阶段 空间域名:空间跟 ...

  9. Caused by: java.lang.ClassNotFoundException: com.mchange.v2.c3p0.ComboPooledDataSource

    1.错误描写叙述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -he ...

  10. HDU 4081 MST

    这道题在LRJ的书上看到,今天回过头来继续看这题,发现很多东西都已经明白了. 题意:有N个城市,每个城市有一个坐标和人口. 现在要建一些边使得他们都联通,花费就是这些边的长度,然后有一条边可以免费.问 ...