How to set label based on toggle switch value

Issue

I use Bootstrap 5 and I wand to use a switch-toggle.

How to set Label based on Switch value.

This does not work:

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="status">
  <script>
   if ($('#status').val() == 1) {
      <label for="site_state" class="form-check-label">Aktif</label>
   } else {
      <label for="site_state" class="form-check-label">Tidak Aktif</label>
   }
   </script>
</div>

Anyone have an idea ?

Solution

Use jQuery's change event to listen for changes on the checkbox. When the checkbox changes, you can check its checked property to determine whether it's checked or not and then update the label accordingly.

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="status">
  <label for="status" class="form-check-label" id="statusLabel">Tidak Aktif</label>
</div>

<script>
$(document).ready(function() {
  $('#status').change(function() {
    if (this.checked) {
      $('#statusLabel').text('Aktif');
    } else {
      $('#statusLabel').text('Tidak Aktif');
    }
  });
});
</script>

Answered By - Karl Hill