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. 像素转换问题-队列解决办法(或者dfs)

    在一定大小的像素图像中,将同色区域的颜色值替换为其他颜色值,从而产生新的图像,输入数据,图像大小,指定的像素点坐标,要替换成的颜色. 一开始出队操作写错了折腾半天,当队列中只有一个元素是出队后要将队首 ...

  2. 轻松背后的N+疲惫——系统日志

    相信很多coder都有这样的癖好:“自恋”!!对自己编写的code总是那么的自信,自豪,Always believe it to be so perfect!! 不喜欢做单元测试(总觉得它就那样了能出 ...

  3. Oracle EBS-SQL (QA-3):检查已检验未入库.sql

    DEFINE RECE="%"  SELECT rsh.receipt_num                                    收据号,           ...

  4. Oracle EBS-SQL (PO-14):检查供应商信息sql

    select pvs.org_id, pvs.vendor_id, pvs.vendor_site_id, hou.name                                 经营组织, ...

  5. STM32F10xxx启动模式分析(详细)

    STM32的启动模式: STM32有三种启动模式,对应的存储介质均是芯片内置的:      1. User Flash Memory(Main Memory)  = 芯片内置的Flash,用户程序存放 ...

  6. 电子科大POJ "整数的千位分隔"

    整数的千位分隔 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) C-source ...

  7. [Leetcode][Python]41: First Missing Positive

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 41: First Missing Positivehttps://oj.le ...

  8. poj 1887 Testing the CATCHER_最长上升子序列

    题意:题目太长没看,直接看输入输出猜出是最长下降子序列 用了以前的代码直接a了,做法类似贪心,把最小的顺序数存在数组里面,每次二分更新数组得出最长上升子序列 #include<iostream& ...

  9. poj 1742 coins_多重背包

    题意:给你N个种硬币,价值和数量,知道手表不大于m,问能组成(1~m)的价格有多少种情况 套套上次那题的模板直接就行了,http://blog.csdn.net/neng18/article/deta ...

  10. 关于App的一些迷思以及一些动画效果开源库的推荐

    http://www.open-open.com/lib/view/open1427856817396.html