Checkbox Selections under Datatable

https://stackoverflow.com/questions/69621520/problem-select-and-deselecting-ranges-of-checkboxes

by Muhammad Asif

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>


<div class="card-body">
  <div class="card-datatable table-responsive">
  <table id="request-list" class="table table-striped " style="border-style: none; ">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <cfloop query="grouplist">
      <tr>
        <td>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input group" value="#id#" name="group" id="group">
              <span class="custom-control-label">#displayname#</span>
          </label>
        </td>
      </tr>
    </cfloop>
  </table>
  </ul>
</div>

<div class="card-body">
  <div class="card-datatable table-responsive">
  <table id="schedule-list" class="table table-striped " style="border-style: none; ">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <cfloop query="schedulelist">
      <tr>
        <td>
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input schedule" value="#id#" name="schedule" id="schedule">
              <span class="custom-control-label">#displayname#</span>
          </label>
        </td>
      </tr>
    </cfloop>
  </table>
  </ul>
</div>

JavaScript

function check(value, className) {

	if(value === 'Select All') {
  	$(className).prop('checked', true);	
  }else{
  	$(className).prop('checked', false);
  }

	return value === 'Select All' ? 'Deselect All' : 'Select All';
}


$(document).ready(function() {



$('#request-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("#request-list_wrapper div.toolbar").html('<input class="btn btn-primary btn-sm md-btn-flat ml-3 checkall" type="button" name="CheckAll" id="checkall" value="Select All"  style="float:left;">');
    
    $(document).on('click', '#request-list_wrapper #checkall',  (event) => {
      const obj = event.target;
      const val = $(obj).val();
    	$(obj).val(check(val, '.group'));
    });


    

    $('#schedule-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("#schedule-list_wrapper div.toolbar").html('<input class="btn btn-primary btn-sm md-btn-flat ml-3 checkall2" type="button" name="CheckAll2" id="checkall2" value="Select All" style="float:left;">');
		
		$(document).on('click', '#schedule-list_wrapper #checkall2',  (event) => {
      const obj = event.target;
      const val = $(obj).val();
    	$(obj).val(check(val, '.schedule'));
    });





} );