Kendo UI 數(shù)據(jù)綁定(二) Checked

Kendo MVVM 數(shù)據(jù)綁定(二) Checked

Checked 綁定用在 checkbox ()或 radio button ()上。注意： checked 綁定只適用于支持 checked 的 DOM 元素，其它 DOM 元素的值可以使用 value 綁定。

多選鈕(Checkedbox） checked 綁定使用 Kendo checked 綁定到 checkbox 時，當 ViewModel 對應的值為 true, Checkbox 顯示選中狀態(tài)，而當用戶點擊 checkbox 選擇狀態(tài)時，對應的 ViewModel 的值也隨之變化。

例如：

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

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

本例，因為 viewModel 的 isChecked 初始值為 false,因此 Checkbox 顯示未選狀態(tài)，如果此時用戶點擊選擇該選項，那么 viewModel 的 isChecked 的值為 true .

綁定一個數(shù)組到一組多選框

checked 綁定支持把 ViewModel 對象的一個數(shù)組屬性綁定到一組多選框， 選擇一組多選框的某個 Checkbox，它的值被添加到 ViewModel 的數(shù)組中，反之，該值從數(shù)組中移除。

<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 顯示選擇狀態(tài)，是因為它的 value 值 ”Red” 包含在 ViewModel 數(shù)組 colors 中， 如果此時選擇 Green ，那么 colors 數(shù)組變?yōu)?Red 和 Green . 如果去除選擇 Red ,則 Colors 數(shù)組只包含 Green .

單選鈕(Radio Button） checked 綁定Kendo MVVM 只有在 ViewModel 的屬性和對應的 radio button 的 value 值一致時才會顯示該 Radio Button 為選中狀態(tài)。

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