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的值也随之变化。

例如：

<input type="checkbox" data-bind="checked: isChecked" />
<script>
var viewModel = kendo.observable({
    isChecked: false
});

kendo.bind($("input"), viewModel);
</script>

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

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

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

<input type="checkbox" value="Red" data-bind="checked: colors" />Red
<input type="checkbox" value="Green" data-bind="checked: colors" />Green
<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
<script>
	var viewModel = kendo.observable({
		colors: ["Red"]
	});

	kendo.bind($("input"), viewModel);
</script>

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

单选钮(Radio Button） checked绑定

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

<input type="radio" value="Red" name="color" data-bind="checked: selectedColor" />Red
<input type="radio" value="Green" name="color" data-bind="checked: selectedColor" />Green
<input type="radio" value="Blue" name="color" data-bind="checked: selectedColor" />Blue
<script>
	var viewModel = kendo.observable({
		selectedColor: "Green"
	});

	kendo.bind($("input"), viewModel);
</script>