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>

轉載地址：http://blog.csdn.net/mapdigit/article/details/10151113