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. Linux环境下常用的SSH命令

    目录操作: rm -rf mydir /*删除mydir目录*/ mkdir dirname /*创建名为dirname的目录*/ cd mydir /*进入mydir目录*/ cd – /*回上一级 ...

  2. php array 排序 感悟

    array  排序总体有这几个函数sort.rsort.asort.arsort.ksort.krsort.usort.uasort.uksort. 一开始我记来记去总是有点混乱,后来认真对比后终于清 ...

  3. C# 缩放图片

    using System; using System.Collections.Generic;using System.Linq;using System.Web;using System.Drawi ...

  4. Python 在Windows下安装matplotlib

    windows下安装很麻烦,使用easy_install 安装报错  提示缺少freetype 和png 后经多方查询,最终安装成功 以下是安装过程 前提你的Python环境已经搭建好了 1.前提需要 ...

  5. undefined reference to `_sbrk', `_write', `_lseek', `_read'

    现象: 在用GCC编译嵌入式MCU程序时,由于使用了第三方的库,出现了类似undefined reference to `_sbrk', `_write', `_lseek', `_read'的连接错 ...

  6. POJ 1631 Bridging signals & 2533 Longest Ordered Subsequence

    两个都是最长上升子序列,所以就放一起了 1631 因为长度为40000,所以要用O(nlogn)的算法,其实就是另用一个数组c来存储当前最长子序列每一位的最小值,然后二分查找当前值在其中的位置:如果当 ...

  7. Spring中的DataBinding(二) - Validation

    @Controller@RequestMapping(value = "/custom/register")public class RegistrationController ...

  8. Nginx 配置指令的执行顺序(七)

    来看一个 ngx_static 模块服务磁盘文件的例子.我们使用下面这个配置片段:     location / {        root /var/www/;    } 同时在本机的 /var/w ...

  9. PM产品经理练级攻略(1-5等级)

    大家都叫“PM”,但做的事情却完全不同? “PM”这个词到底是什么意思? 这个话题恐怕也是各位同行都一直在想,也一直想不清楚的吧,我也是. 每次看到各种“产品经理的能力模型”,我都觉得有点扯淡,总觉得 ...

  10. Seafile 推出 “分布式文件同步技术” 打造的私有云服务

    近两年来 Dropbox 等云储存服务迅速窜红,各大巨头纷纷推出自家的云储存服务(苹果的 iCloud, 微软的 SkyDrive, Google 即将推出的 GDrive),国内也有类似的服务(金山 ...