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控件,并且需要勾选的功能.父子节 ...
随机推荐
- [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明,更倾向使用auto
条款5 相对显式类型声明,更倾向使用auto 基础知识 auto能大大方便变量的定义,可以表示仅由编译器知道的类型. template<typename It> void dwim(It ...
- Mysql 记录
1.创建用户命令: <!---->mysql> CREATE USER yy IDENTIFIED BY '123'; yy表示你要建立的用户名,后面的123表示密码 上面建立的用户 ...
- css多行文本居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux Power(一): kernel/power/earlysuspend.c
/* kernel/power/earlysuspend.c * * Copyright (C) 2005-2008 Google, Inc. * * This software is license ...
- 整理:GET与POST的区别
1.根据HTTP规范,GET用于信息获取,而且应该是安全的和幂等的. (1).所谓安全的意味着该操作用于获取信息而非修改信息.换句话说,GET 请求一般不应产生副作用.就是说,它仅仅是获取资源信息,就 ...
- Gartner Publishes 2014 Magic Quadrant for SIEM and Critical Capabilities for SIEM Reports
http://securityintelligence.com/gartner-2014-magic-quadrant-siem-security/#.SzNnhshk https://www.net ...
- Eclipse图标含义
学习了这么久,之前也没注意,这次在csdn找个了文章,记录一下: Eclipse的Package Explorer中用图标表示了很多内容,刚刚开始接触Eclipse时对这些图标表示的内容并不清楚,而且 ...
- 一道C语言面试题:判断字串是否可以通过重新排列字母使之对称
题目:输入一个字符串,如“adcaeceeed”,判断是否可以通过重新排列使之可以输出对称字符串,如本例可以输出“adceeeecda”,返回True. 来源:某500强企业面试题目 思路:扫描字串, ...
- http协言和web本质
http协议和web本质 作为一个开发者,尤其是web开发人员,我想你有必要去了解这一系列的处理流程,在这期间,浏览器和服务器到底是如何打交道的?服务器又是如何处理的?浏览器又是如何将网页显示给用户的 ...
- 这是一个hibernate 联合主键的例子
package com.bird.entity; import java.io.Serializable; import javax.persistence.Entity; import javax. ...