KnockoutJS - checkbox應用(1)

單一checkbox

在使用單一checkbox時，checked binding所儲存的值為true或false

<label>
    <input type="checkbox" data-bind="checked: hasChecked" />Tick me!
</label>
<div>
    hasChecked: <span data-bind="text: hasChecked"></span>
</div>

function ViewModel() {
    var self = this;
    self.hasChecked = ko.observable(false);
}

ko.applyBindings(new ViewModel());

勾選checkbox時，hasChecked屬性會被指派為true，反之為false。執行結果可參考



單一checkbox搭配顯示開關

某些情況下我們會希望當checkbox被勾選時才把資料顯示出來，例如顯示一段警告訊息或是表單資料，這時可以使用checked binding搭配visible binding來控制資料顯示與否。

多個checkbox

checked binding除了可以使用在單一一個checkbox，也可使用於多個checkbox。在多個checkbox的情形下，checked binding裡的值就不是布林而是陣列，需透過observableArray去讀取。

<label>
    <input type="checkbox" value="webforms" data-bind="checked: techniques" />ASP.NET WebForms
</label>
<label>
    <input type="checkbox" value="mvc" data-bind="checked: techniques" />ASP.NET MVC
</label>
<label>
    <input type="checkbox" value="webapi" data-bind="checked: techniques" />ASP.NET Web API
</label>
<div data-bind="text: techniques().join(', ')"></div>

function ViewModel() {
    var self = this;
    self.techniques = ko.observableArray();
}

ko.applyBindings(new ViewModel());

techniques為一observableArray，當checkbox被勾選時，checkbox之值即被寫入techniques中。執行結果可參考



如果預設要將ASP.NET WebForms及ASP.NET MVC兩個checkbox勾選，可在ViewModel裡將techniques設為ko.observableArray(["webforms", "mvc"])。

延伸閱讀
KnockoutJS - checkbox應用(2)