form checkboxes as an type list

I want to make these checkboxes look like an unordered list where I can add a "Select All" functionality without having to click every checkbox individually. I also want the checkboxes beneath each other. What's the best way to do it?

Thanks in advance!

<form action="https://zeggut.nl/lvnl/" id="rapportage_filter" class="">
  <a href="javascript:;" onclick="$(this).closest('form').toggleClass('rapportage_filter_hide');" id="rapportage_filter_close"><i class="fas fa-chevron-up"></i><i class="fas fa-chevron-down"></i></a>
  <div>
    <div id="rapportage_filter_date">
      <div>Selecteer een periode</div>


      <div><input type="date" name="response_date_from" onchange="rapportage_filter();" value="2019-12-10"></div>
      <div><input type="time" name="response_time_from" onchange="rapportage_filter();" value="15:11"></div>
      <div><input type="date" name="response_date_to" onchange="rapportage_filter();" value="2019-12-11"></div>
      <div><input type="time" name="response_time_to" onchange="rapportage_filter();" value="15:12"></div>

    </div>
    <div id="rapportage_date_users">
      <div class="mb10">
        <strong>Gevonden groepen/gebruikers <span class="f11">Je kunt deze sorteren</span></strong>
      </div>
      <div id="rapportage_date_users_sortable" class="ui-sortable">
        <label title="2134 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2134" checked="checked"></label>
        <label title="2097 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2097" checked="checked">Groep 1 - Airside</label>
        <label title="2106 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2106" checked="checked">Groep 1 - Riverside</label>
        <label title="2100 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2100" checked="checked">Groep 2 - Airside</label>
        <label title="2105 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2105" checked="checked">Groep 2 - Riverside</label>
        <label title="2101 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2101" checked="checked">Groep 3 - Airside</label>
        <label title="2104 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2104" checked="checked">Groep 3 - Riverside</label>
        <label title="2103 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2103" checked="checked">Groep 4 - Airside</label>
        <label title="2098 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="2098" checked="checked">Groep 4 - Riverside</label>
        <label title="1057 " class="ui-sortable-handle"><input type="checkbox" name="rapportage_user[]" value="1057" checked="checked">Leantheman - 2019</label>
      </div>
    </div>
    <div class="mt10"><input type="submit" class="btn_true" value="Go"></div>
  </div>
</form>