【原创】knockout--添加radio的checked绑定

直接上代码:

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

<script type="text/javascript">
    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    };

    // ... then later ...
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>

这是官网上的一段代码,可以看出有三个radio,他们的checked属性都绑定在spamFlavor上,初值是“almond”,这样默认的value是“almond”的radio被选中。

刚开始我以为checked的有效值是true或false,后来才清楚原来有效值是radio的value属性。

【原创】knockout--添加radio的checked绑定,布布扣,bubuko.com

时间: 2024-10-28 19:49:01

【原创】knockout--添加radio的checked绑定的相关文章

Knockout学习之表单绑定器(下)

“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本: 1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button typ

KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定

textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,textinput绑定是实时更新的. 例如: Login name: Password: ViewModel: 源码: <p>Login name: <input data-bind="textInput: userName" /></p> <p>

Visual Studio中Radio Button组绑定变量方法(DDX_Radio方法)

需求描述:Visual Studio 创建的界面程序中又许多 Radio Button,希望这些所有的Radio Button统一绑定到一个变量上,这个变量一旦改变,Radio Button的选中状态会相应的改变. 实现方法:在DoDataExchange函数中: DDX_Radio(pDX, IDC_RADIO1, m_nRadio1);函数 具体方法(以3个Radio Button为例): 1.三个Radio Button,ID分别为:IDC_RADIO1, IDC_RADIO2, IDC_

Knockout学习之表单绑定器(上)

表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然其他可见的dom元素也是一样可以的.下面我们就简单的举一个例子: 1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="cl

在ASP.NET MVC中使用Knockout实践09,自定义绑定

Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素变成jQuery UI的button,大致这样做: <button id="btn">点我</button> $('#btn').button( icons: { primary: 'ui-icon-gear' } ); "他山之石,可以攻玉",

jquery动态添加删除div--事件绑定,对象克隆

我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后)        使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很好的解决这个问题          相关描述如下 功能:点击增加,自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div 问题:默认存在的(也就是页面加载进来的)的那个iptdiv 后的 X 点击有效,可以删除当前 iptdiv  但

一个简单的knockout.js 和easyui的绑定

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="easyui.css"><link rel=&quo

jquery设定radio的checked无效

环境:chrome + jquery.2.1.1.min.js 设置一次为checked的状态后,再一次设置radio状态,无效. 如: $('input[type="radio"][name="name"]').attr("checked", "checked"); $('input[type="radio"][name="name"]').attr("checked&quo

JS普通添加事件和事件绑定的区别

很简单,看代码. 普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ alert(1); } btn.onclick = function(){ alert(2); } 执行上面的代码只会alert 2 事件绑定方式添加事件: var btn = document.getElementById("hello"); btn.addEventListener(&