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

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>

3	var viewModel = kendo.observable({

4	isChecked: false

5

});

6

7	kendo.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>

在这个例子中，第一个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>