toggleClass based upon check box click

toggleClass based upon check box click and add class to div.

by Shree Khanal

HTML

<div id="map">
<div id="region-one"></div>
<div id="region-two"></div>
<div id="region-three"></div>
</div>


<ul>
    <li><input type="checkbox" name="region" value="region-one" id="toggle-region-one"><label for="toggle-region-one">Region one</label></li>
    <li><input type="checkbox" name="region" value="region-two" id="toggle-region-two"><label for="toggle-region-two">Region two</label></li>
    <li><input type="checkbox" name="region" value="region-three" id="toggle-region-three"><label for="toggle-region-three">Region three</label></li>
</ul>

CSS

#region-one, #region-two, #region-three {
  background-color: #666;
  height: 100px;
  width: 100px;
  display: inline-block;
}

#map .active {
background-color: red;
}

JavaScript

var id1 = "";
var id2 = "";

$(function() {
  $('[id^="toggle-region"]').change(function() {
    id1 = $(this).attr("id");
    id2 = id1.substring(id1.indexOf('-') + 1);

    $("#" + id2).toggleClass("active", this.checked)
  }).change();
});

$("#" + id2).on('click', function() {
  $("#" + id1).trigger('click');
});