How to display the label for checked checkboxes instead of its values

In this code I use dropdown as an example

 <div class="dropdown">      <button class="btn btn-light btn-block dropdown-toggle" type="button" id="bahagian" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bahagian </button>          <div class="dropdown-menu" id="checkboxes1" aria-labelledby="bahagian" style="height: auto; max-height: 200px; overflow-x: hidden; width: 100%;">              <li class="dropdown-item">                 <input type="checkbox" name="bahagian[]" value="JB"><label>Johor Bahru</label>              </li>              <li class="dropdown-item">                 <input type="checkbox" name="bahagian[]" value="TE"><label>Tebrau</label>              </label>              <li class="dropdown-item">                 <input type="checkbox" name="bahagian[]" value="PG"></label>Pasir Gudang</label>              </li>                   </div>                    <div id="output1" class=""></div><br>      </button>  </div>  

Currently this is the javascript code I used to display it values and it working but how to display the label?

<script>      $("#checkboxes input").click(function () {          $("#output").text($("#checkboxes input:checked").map(function () {              return $(this).val();          }).get().join());      }).click().click();  </script>  

https://stackoverflow.com/questions/65401640/how-to-display-the-label-for-checked-checkboxes-instead-of-its-values December 22, 2020 at 08:09AM