Filtering with Checkbox - simple

by Jaganathan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<table>
    <span> Rejected Users </span> <input type="checkbox" data-bind="click: rejectedAllClicked, checked: rejectedAllChecked" /> All
    <tbody data-bind="foreach: rejectedUsers">
        <tr>
            <td ><span class="rejected" data-bind="text: firstName"> </span> <input data-bind="checked: $parent.selectedUserFromRejected, value: id" type="checkbox" /> </td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>
<br/>
<table>
    <span> Approved Users </span> <input type="checkbox" data-bind="click: approvedAllClicked, checked: approvedAllChecked" /> All
    <tbody data-bind="foreach: approvedUsers">
        <tr>
            <td ><span class="approved" data-bind="text: firstName"> </span> <input data-bind="checked: $parent.selectedUserFromApproved, value: id"  type="checkbox" /> </td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
        </tr>
    </tbody>
</table>
        
        <p> Selected Ids from Rejected:  
            <pre data-bind="text: ko.toJSON(selectedUserFromRejected, null, 2)"> </pre> </p>

 <p> Selected Ids from Approved:  
            <pre data-bind="text: ko.toJSON(selectedUserFromApproved, null, 2)"> </pre> </p>

CSS

th
{
    cursor:pointer;
}

span.rejected {
    color: red;
}

span.approved {
    color: green;
}

JavaScript

var viewModel = function(){
    var self = this;
    // consider that this is from ajax success callback
    self.dataFromServer = [
        {firstName:'Jagan',lastName:'B',age:38, isApproved: true, id:0},
        {firstName:'Ammu',lastName:'D',age:36, isApproved: false, id:1},
        {firstName:'Jagan',lastName:'M',age:10, isApproved: true,id:2},
        {firstName:'Megan',lastName:'S',age:7, isApproved: false, id:3},
        {firstName:'Mani',lastName:'J',age:40, isApproved: true, id:4},
        {firstName:'Ammu',lastName:'K',age:36, isApproved: false, id:5},
        {firstName:'Jagan',lastName:'D',age:10, isApproved: true, id:6}
    ];
    // convert the normal property to observable array using plugin
    self.users = ko.mapping.fromJS(self.dataFromServer);
    
    self.selectedUserFromApproved = ko.observableArray();
    
    self.selectedUserFromRejected = ko.observableArray();
    
    self.rejectedAllChecked = ko.computed({
        read: function() {
                return self.rejectedUsers.length === self.selectedUserFromRejected().length;
        },
        deferEvaluation: true});
    
    self.approvedAllChecked = ko.computed({
        read: function() {
                return self.approvedUsers.length === self.selectedUserFromApproved().length;
        },
        deferEvaluation: true});

    self.rejectedAllClicked = function() {
        if(event.target.checked) {
            event.target.checked = true;
            ko.utils.arrayForEach(self.rejectedUsers, function(item) {
                 self.selectedUserFromRejected.push(item.id().toString());
            });
        }
        else
        {
            ko.utils.arrayForEach(self.rejectedUsers, function(item) {
                 self.selectedUserFromRejected.remove(item.id().toString());
            });
            event.target.checked = false;
            
        }
        return true;   
    }
    
    self.approvedAllClicked = function() {
        if(event.target.checked) {
       ...