[FIXED] Display button if checkbox is checked

Issue

I would like to show a button when a checkbox is checked.

Unfortunately I couldn't find a solution on the internet... Does somebody know how to solve my problem?

Currently this is where I stand:

<div class="custom-control custom-radio custom-control-inline">
    <input th:id="checkboxTerms" th:checked="${flag}" type="checkbox" class="custom-control-input">
    <label class="custom-control-label">Terms & Conditions</label>
</div>

<div th:if="${flag == true}">
    <!-- Create Account Button -->
    <button class="green_btn w-75 mt-4 mb-3 btn btn-lg rounded-pill" type="submit" id="idBtnSub">Create Account</button>
</div>

Solution

<script>
  function toggleButton() {
    if (document.getElementById("idBtnSub").style.visibility == "hidden") {
      document.getElementById("idBtnSub").style.visibility = "visible";
    } else {
      document.getElementById("idBtnSub").style.visibility = "hidden";
    }
  }
</script>



<div class="custom-control custom-radio custom-control-inline">
  <input onChange="toggleButton();" "th:id="checkboxTerms" th:checked="${flag}"
  type="checkbox" class="custom-control-input">
  <label class="custom-control-label">Terms & Conditions</label>
</div>

<div th:if="${flag == true}">
  <!-- Create Account Button -->
  <button
    class="green_btn w-75 mt-4 mb-3 btn btn-lg rounded-pill"
    type="submit"
    id="idBtnSub"
    style="visibility: hidden;"
  >
    Create Account
  </button>
</div>

Answered By - Raine
Answer Checked By - David Marino (JavaFixing Volunteer)