JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
          <div class="modal-body row col-xs-12">
            <div class="col-xs-8 common-inputs">
              <form role="form" class="left-checkbox-container col-xs-12">
              <div class="custom-checkbox checkbox-title">
                <input type="checkbox" id="common"/>
                <label for="common"></label> <span>Common</span>
              </div>
                </form>
              <form role="form" class="left-checkbox-container col-xs-5">
                <div class="custom-checkbox">
                  <input type="checkbox" id="post-id"/>
                  <label for="post-id"></label> <span>ID</span>
                </div>
                <div class="custom-checkbox">
                  <input type="checkbox" id="activation" name="check"/>
                  <label for="activation"></label> <span>Active</span>
                </div>
                <div class="custom-checkbox">
                  <input type="checkbox" id="information" name="check" />
                  <label for="information"></label> <span>info</span>
                </div>
              </form>
              <form role="form" class="left-checkbox-container col-xs-5">
                <div class="custom-checkbox">
                  <input type="checkbox" id="on-off"/>
                  <label for="on-off"></label> <span>on/off</span>
                </div>
                <div class="custom-checkbox">
                  <input type="checkbox" id="social-network" name="check" />
                  <label for="social-network"></label> <span>social</span>
                </div>
                <div class="custom-checkbox">
                  <input type="checkbox" id="category" name="check" />
                  <label for="category"></label> <span>category</span>
                </div>
              </form>
            </div>

CSS

#common {
  margin-left: 20px;
}
#common + label + span {
  font-size: 21px;
  color:red;
}

JavaScript

$( '#common' ).on('click', function () {
        $( '.common-inputs [type="checkbox"]' ).prop('checked', this.checked);
        $("#activation").attr("checked", true);
        $("#post-id").attr("checked", true);
      });
//checkbox
      $("#activation").attr("checked", true);
      $("#post-id").attr("checked", true);