jQuery addClass example

Change class name on click in jQuery

by st3fan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div id="page">
  <div id="banner-message-x">
    <p data-bind="{text:heading}"></p>
    
    <ul data-bind="foreach: categories">
        <li>
            <input type="checkbox" data-bind="checkedValue: id, checked: selected, attr:{ id:'category_' + id }">
            <label data-bind="{ text:name, attr:{ for:'category_' + id } }"></span>
        </li>
    </ul>
    
    <div id="checkboxList" class="checkbox-list" data-bind="template: { name: 'checkboxListItem-template', foreach: categories }">
</div>
    
    <button>Change color</button>
    
    <pre data-bind="text: ko.toJSON($root)"></pre>
  </div>
</div>

<script type="text/html" id="checkboxListItem-template">
<div>
  <label>
    <input type="checkbox" data-bind="{value: id, checked: selected}" />
    <span data-bind="{text: name}"></span>
  </label>
</div>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

ul {
  list-style: none;
  padding: 0;
}
#page {
  background: #fff;
  padding: .5em;
}
pre {
  display: block;
  overflow: hidden;
}
#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var categories = [
 { id: 1, name: "A", selected: true },
 { id: 2, name: "B", selected: false },
 { id: 3, name: "C", selected: true }
];

var viewModel = {
	heading: ko.observable("Tjeeena!"),
	categories: ko.observableArray(categories),
  selectedCategories: ko.observableArray()
};

console.log(viewModel);

ko.applyBindings(viewModel, $("#page")[0]);