Change-class-CHKBOX

by Raúl Rojas

HTML

<body class="cbx">
  <div class="selects">
    <input id="uno" type="checkbox" />
    <input id="dos" type="checkbox" />

  </div>

  <div class="colors">
    <p class="rojos">Rojo</p>
    <p class="verdes">Verde</p>
  </div>


</body>

CSS

.colors {
  width: 260px;
  text-align: center;
  color: gray;
  border: 1px solid #ccc;
}

.red {
  color: white;
  background: red;
}

.green {
  color: white;
  background: green;
}

JavaScript

$('input#uno').on('change', function() {
  $('p.rojos').toggleClass('red');
});

$('input#dos').on('change', function() {
  $('p.verdes').toggleClass('green');
});