在多个列表中选中复选框时，选择所有复选框

Question

There is a scenario where list of timelsots are listed under days and this data is dynamically coming from server. Now user should select all the timeslots for a given day.Something like in this fiddle . I am trying to follow the example on knockout documentation but on this example header checkbox is not dynamic. By same way how can i maintain the reference of multiple lists ?

<ul class="header" data-bind="foreach: days">
<li>
    <label>
        <input type="checkbox" data-bind="attr: { id: 'chk' + id }"/>
        <span data-bind="text: name"></span>
    </label>
    <ul data-bind="foreach: timeslots">
        <li>
            <label>
                <input type="checkbox" data-bind="attr: { id: 'chk' + id }"/>
                <span data-bind="text: name"></span>
            </label>
        </li>    
    </ul>
</li>    

    function MyViewModel() {

    this.days = ko.observableArray([
        { name:"Sunday", id:1 , timeslots : [{ name:"10:00 - 11:00", id:10},{ name:"10:00 - 11:00", id:11},{ name:"10:00 - 11:00", id:12}] },
        { name:"Monday", id:2 , timeslots : [{ name:"10:00 - 11:00", id:20},{ name:"10:00 - 11:00", id:21},{ name:"10:00 - 11:00", id:22}] },
        { name:"Tuesday", id:3 , timeslots : [{ name:"10:00 - 11:00", id:30},{ name:"10:00 - 11:00", id:31},{ name:"10:00 - 11:00", id:32}] },
        { name:"Wednesday", id:4 , timeslots : [{ name:"10:00 - 11:00", id:40},{ name:"10:00 - 11:00", id:41},{ name:"10:00 - 11:00", id:42}] },
        { name:"Thursday", id:5 , timeslots : [{ name:"10:00 - 11:00", id:50},{ name:"10:00 - 11:00", id:51},{ name:"10:00 - 11:00", id:52}] },
        { name:"Friday", id:6 , timeslots : [{ name:"10:00 - 11:00", id:60},{ name:"10:00 - 11:00", id:61},{ name:"10:00 - 11:00", id:62}] },
        { name:"Saturday", id:7 , timeslots : [{ name:"10:00 - 11:00", id:70},{ name:"10:00 - 11:00", id:71},{ name:"10:00 - 11:00", id:72}] }
    ]);
    this.selectedDays = ko.observableArray([ 
        { id:1 , timeslots : [{ name:"10:00 - 11:00", id:10},{ name:"10:00 - 11:00", id:12}] },
        { id:2 , timeslots : [{ name:"10:00 - 11:00", id:21}] }
    ]);
}
ko.applyBindings(new MyViewModel());

The functionality i am trying to achieve is Example 2: Selecting/deselecting all items in the knockout documentation link but i don't how to implement the pureComputed function in my scenario.

Answer 1

It's best to map your plain object to some sort of view model that can have observable or computed properties first.

Then,

1. You give each timeslot an observable boolean checked property,
2. You give each day a writable computed checked property

The write function of your days' checked property sets all of the inner timeslots . Its read function returns whether at least one of the timeslots is checked.

In the end, you create a pureComputed state that parses the viewmodels back to a plain javascript data structure. To do so, I filter out the unchecked days first. Then, for each day that has a checked timeslot, I collect the labels of the checked items.

---

Here's an example, abstracted to just Group and Item models. You should be able to convert it to your own format. Let me know if you need more help with that.

 function Item(label) { this.label = label; this.checked = ko.observable(false); } Item.forLabel = str => new Item(str); function Group(label, items) { this.label = label; this.items = items.map(Item.forLabel); this.checked = ko.computed({ read: () => this.items.some(i => i.checked()), write: val => { this.items.forEach(i => i.checked(val)); } }); } Group.prototype.toJS = function() { // Define the format of your selected state here: return { label: this.label, items: this.items .filter(i => i.checked()) .map(i => i.label) }; } const groups = [ new Group("colors", [ "red", "green", "blue" ]), new Group("directions", [ "up", "down" ]) ]; const selection = ko.pureComputed( () => groups .filter(g => g.checked()) .map(g => g.toJS()) ) ko.applyBindings({ groups, selection }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <ul data-bind="foreach: groups"> <li> <label> <input type="checkbox" data-bind="checked: checked"> <span data-bind="text: label"></span> </label> <ul data-bind="foreach: items"> <li> <label> <input type="checkbox" data-bind="checked: checked"> <span data-bind="text: label"></span> </label> </li> </ul> </li> </ul> <pre data-bind="text: JSON.stringify(selection(), null, 4)" style="background: #efefef; padding: 1rem;"></pre>