Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked

本文深入探讨了Kendo UI MVVM中如何使用checked绑定来操控checkbox和radiobutton的状态,包括多选框的数组绑定和单选框的值匹配逻辑。通过实例代码演示了如何在视图模型中设置和响应这些控件的状态变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Checked绑定用在checkbox ()或 radio button ()上。
注意:checked绑定只适用于支持checked的DOM元素,其它DOM元素的值可以使用value绑定。

多选钮(Checkedbox) checked绑定

使用Kendo checked绑定到checkbox时,当ViewModel对应的值为true, Checkbox显示选中状态,而当用户点击checkbox选择状态时,对应的ViewModel的值也随之变化。

例如:

1<input type="checkbox" data-bind="checked: isChecked" />
2<script>
3var viewModel = kendo.observable({
4    isChecked: false
5});
6 
7kendo.bind($("input"), viewModel);
8</script>

本例,因为viewModel的isChecked初始值为false,因此Checkbox显示未选状态,如果此时用户点击选择该选项,那么viewModel的isChecked的值为true.

绑定一个数组到一组多选框

checked绑定支持把ViewModel对象的一个数组属性绑定到一组多选框, 选择一组多选框的某个Checkbox,它的值被添加到ViewModel的数组中,反之,该值从数组中移除。

1<input type="checkbox" value="Red" data-bind="checked: colors" />Red
2<input type="checkbox" value="Green" data-bind="checked: colors"/>Green
3<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
4<script>
5    var viewModel = kendo.observable({
6        colors: ["Red"]
7    });
8 
9    kendo.bind($("input"), viewModel);
10</script>

20130817002

在这个例子中,第一个checkbox显示选择状态,是因为它的value 值”Red” 包含在ViewModel数组colors中, 如果此时选择Green ,那么colors数组变为Red 和Green. 如果去除选择Red,则Colors数组只包含Green.

单选钮(Radio Button) checked绑定

Kendo MVVM 只有在ViewModel的属性和对应的radio button的value值一致时才会显示该Radio Button为选中状态。

1<input type="radio" value="Red" name="color" data-bind="checked: selectedColor" />Red
2<input type="radio" value="Green" name="color" data-bind="checked: selectedColor" />Green
3<input type="radio" value="Blue" name="color" data-bind="checked: selectedColor" />Blue
4<script>
5    var viewModel = kendo.observable({
6        selectedColor: "Green"
7    });
8 
9    kendo.bind($("input"), viewModel);
10</script>

20130817003

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值