JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<input type="checkbox" data-bind="checked: carsOnly" />
<label>Show cars only</label>
<table>
<tbody data-bind="foreach: filteredItems">
    <tr>
        <td data-bind="text: vehicleType"></td>
        <!-- would display 'car' or 'truck' -->
    </tr>
</tbody>
</table>

CSS

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}

JavaScript

var viewModel = ko.mapping.fromJS({
    carsOnly: true,
    items: [{
        vehicleType: 'car'
    }, {
        vehicleType: 'car'
    }, {
        vehicleType: 'truck'
    },{
        vehicleType: 'car'
    }, {
        vehicleType: 'car'
    }, {
        vehicleType: 'truck'
    }]
});
viewModel.filteredItems = ko.computed(function() {
    var filter = this.carsOnly();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return 'car' === item.vehicleType()
        });
    }
}, viewModel);


ko.applyBindings(viewModel);