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

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

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

多選鈕(Checkedbox） checked 綁定使用 Kendo checked 綁定到 checkbox 時(shí)，當(dāng) ViewModel 對(duì)應(yīng)的值為 true, Checkbox 顯示選中狀態(tài)，而當(dāng)用戶(hù)點(diǎn)擊 checkbox 選擇狀態(tài)時(shí)，對(duì)應(yīng)的 ViewModel 的值也隨之變化。

例如：

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

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

本例，因?yàn)?viewModel 的 isChecked 初始值為 false,因此 Checkbox 顯示未選狀態(tài)，如果此時(shí)用戶(hù)點(diǎn)擊選擇該選項(xiàng)，那么 viewModel 的 isChecked 的值為 true .

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

checked 綁定支持把 ViewModel 對(duì)象的一個(gè)數(shù)組屬性綁定到一組多選框， 選擇一組多選框的某個(gè) 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>

在這個(gè)例子中，第一個(gè) checkbox 顯示選擇狀態(tài)，是因?yàn)樗?value 值 ”Red” 包含在 ViewModel 數(shù)組 colors 中， 如果此時(shí)選擇 Green ，那么 colors 數(shù)組變?yōu)?Red 和 Green . 如果去除選擇 Red ,則 Colors 數(shù)組只包含 Green .

單選鈕(Radio Button） checked 綁定Kendo MVVM 只有在 ViewModel 的屬性和對(duì)應(yīng)的 radio button 的 value 值一致時(shí)才會(huì)顯示該 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>