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>