Kendo MVVM 数据绑定(二) Checked

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>