knockout 与checkbox联动
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联动的更多相关文章
- TreeView checkbox
C# TreeView checkbox 联动打勾 #region 将树的checkbox选中 private void setNodeTrue(Node selNode) { Node node = ...
- [extjs] ExtJS4 treepanel 子节点选中父节点自动选中,选中父节点 子节点自动全部选中
ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...
- day 46 html 学习 列 表格,
列表 1.无序列表 <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul ...
- label联动checkbox
label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.
- knockout checkbox 全选
knockout checkbox 全选 <input type=checkbox data-bind="checked:IsAll"/>全选 <ul data- ...
- 在vue中如何实现购物车checkbox的三级联动
最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下 ...
- React实现checkbox group多组选项和标签组显示的联动
实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...
- ztree checkbox父子联动
1. 对于ztree而言,如果需要设置或者取消ztree的父子联动,只要在setting里面设置chkboxType的参数即可: 其中Y表示被checkbox被勾选时的联动情况,N表示取消勾选时的联动 ...
- TreeView CheckBox勾选联动
http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...
随机推荐
- [ofbiz]screen中应用form和ftl,控制页面元素属性
可以在screen中定义form与ftl两个文件,ftl中可以使用js控制form中的页面元素属性. 控制元素是否可编辑: $("#oaDataReport_budget&qu ...
- AdapterView及其子类之一:基本原理(ListView、ListActivity类型)
参考<疯狂android讲义>2.5节 1.AdapterView一般用于显示列表项,其内容由Adapter提供.调用Adapter的setAdapter(Adapter)方法设置Adap ...
- SSH安全登录(远程管理)22端口
Linux管理Linux 先加密再发送数据,更安全 一 联机加密工具 非对称钥匙对加密 安装 默认安装 openssh 启动 ...
- GDAL与OpenCV2.X数据转换(适合多光谱和高光谱等多通道的遥感影像)
一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...
- js监听和观察者模式
http://redhacker.iteye.com/blog/1756436 https://developer.mozilla.org/en-US/docs/Web/Guide http://ww ...
- USB device & USB controller & USB passthrough
目录 USB device USB controller Linux 相关命令 Python 相关库 Libvirt USB passthrough 参考资料 近期往 openstack 里倒腾 US ...
- wordpress All in one Seo
原文地址:http://www.7adesign.com/155.html WordPress插件All-in-one-seo-pack详细设置: I enjoy this plugin and ha ...
- 一个简单java爬虫爬取网页中邮箱并保存
此代码为一十分简单网络爬虫,仅供娱乐之用. java代码如下: package tool; import java.io.BufferedReader; import java.io.File; im ...
- leetcode_question_104 Maximum Depth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- DisplayMetircs 类
Android 可设置为随着窗口大小调整缩放比例,但即便如此,手机程序设计人员还是必须知道手机屏幕的边界,以避免缩放造成的布局变形问题. 手机的分辨率信息是手机的一项重要信息,很好的是,Android ...