JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>

  <div class="form-check" id="id-do-check-1">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  
  <div class="form-check" id="id-do-check-2" style="display:none;">
    <input type="checkbox" class="form-check-input" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>
  </div>


</form>

JavaScript

var check1 = $("#id-do-check-1");
    var check2 = $("#id-do-check-2");

    check1.on("change", function () {
            if (check1.find("input:checked").length) {
                check2.show();
            }
            else {
                check2.hide();
            }
        }
    );