Problem select and deselecting ranges of checkboxes

user_6114401 0
Viewed 74

I have a page that will have 4 separate datatables on the page. Each table will have a select/deselect all button. I am trying to get this working with only two tables so far. When I click the buttons it changes the button value from Select All to Deselect All and so on, but when I am on the first groups table and click the button nothing happens for the groups. The schedule records all get selected. Any ideas what I am doing wrong?

<script>

var checkflag = "false";

function checkGroups() {
  var inputs = document.getElementsByClassName( 'group' );
  if (checkflag == "false")
   {
  for (var i = 0; i < inputs.length; i++) {
      inputs.checked = true;
    }
    checkflag = "true";
    return "Deselect All";
    }
else {
  for (var i = 0; i < inputs.length; i++)
  {
  inputs.checked = false; }
  checkflag = "false";
  return "Select All";
  }
}

var checkflag2 = "false";

function checkGroups() {
  var inputs2 = document.getElementsByClassName( 'schedule' );
  if (checkflag2 == "false")
   {
  for (var i = 0; i < inputs2.length; i++) {
      inputs2.checked = true;
    }
    checkflag2 = "true";
    return "Deselect All";
    }
else {
  for (var i = 0; i < inputs2.length; i++)
  {
  inputs2.checked = false; }
  checkflag2 = "false";
  return "Select All";
  }
}

</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>

<script>

$(document).ready(function() {
    $('#request-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("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" onClick="this.value=checkGroups(this.form)" style="float:left;">');
} );


$(document).ready(function() {
    $('#schedule-list').DataTable( {
        "dom": '<"toolbar">frtip',
        "iDisplayLength": 500
    } );
    $("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" onClick="this.value=checkScheds(this.form)" style="float:left;">');
} );


</script>
datatables javascript
1 Answers

There are a few issues with the code you have shared.

Issues

  1. checkScheds method is missing. You have named both methods as checkGroups
  2. When you call the $("div.toolbar").html second time it actually replace all the div elements in the page with class toolbar
  3. You rather need to attach the 1st click handler with the first toolbar inside request-list and second with the second toolbar inside the schedule-list
  4. When you call DataTable it actually adds the wrapper divs like request-list_wrapper and schedule-list_wrapper
  5. So you have to actually using the selector #request-list_wrapper div.toolbar when you call .html method
  6. Furthermore in the checkGroups and checkScheds methods inside the for loops you have to set inputs[i].checked to access the individual checkboxes rather than inputs.checked

Working Solution 1

You can have a look at the following code snippet that is working fine.

var checkflag = false;

function checkGroups() {

  var inputs = document.getElementsByClassName( 'group' );
  
  checkflag = checkflag === false ? true : false;
  
  for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = checkflag;
    }
    
  return checkflag === true ? "Deselect All" : "Select All";
}

var checkflag2 = false;

function checkScheds() {
  
  var inputs = document.getElementsByClassName( 'schedule' );
  
  checkflag2 = checkflag2 === false ? true : false;
  
  for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = checkflag2;
    }
    
  return checkflag2 === true ? "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" onClick="this.value=checkGroups(this.form)" style="float:left;">');
} );


$(document).ready(function() {
    $('#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" onClick="this.value=checkScheds(this.form)" style="float:left;">');
} );
<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>

Working Solution 2

Another version of the solution is this.

user_5788550
Related