Checkbox adds class

This example shows how to add/remove classes dynamically. In this case by using checkboxes.

In this example - using Bootstrap styling to create two columns - we see a list of "continents" on the left and a list of countries on the right.

When a continent is checked, the countries of that continent are highlighted.

This is achieved using the ifchecked-addclass event-action attribute, that, if the checkbox holding the attribute is checked, adds the given class(es) to itself, or if an "on" clause is given, to the element(s) matching the given CSS selector. If the checkbox is unchecked, the operation is reversed: the class is removed.

<div class="row">
  <div class="col">
    <input type="checkbox" ifchecked-addclass="chosen on .european" /> Europe</br>
    <input type="checkbox" ifchecked-addclass="chosen on .americas" /> Americas</br>
    <input type="checkbox" ifchecked-addclass="chosen on .asia" /> Asia</br>
  </div>
  <div class="col">
    <div class="european">Austria</div>
    <div class="asia">Bangladesh</div>
    <div class="asia">China</div>
    <div class="european">Denmark</div>
    <div class="european">Estonia</div>
    <div class="european">Finland</div>
    <div class="americas">Guatemala</div>
    <div class="americas">Haiti</div>
  </div>
</div>

The example needs CSS to define the chosen class as visually distinctive. For instance:

.chosen{ background-color: yellow; }

Checking the checkbox in front of "Europe" will add the class chosen to all elements having the european class. Styling will then make those countries appear on a yellow background.

Unchecking the checkbox will remove the chosen class from the European countries.