Normal checkboxes approach

For me to work

by princeofabyss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<form id="questions-form">
  <table id="questions-pool" width="100%">
    <thead>
      <tr>
        <th></th>
        <th>Questions Pool</th>
        <th></th>
        <th><span id="stats"></span><input type="checkbox" name="toggleAll"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="move-handle"></td>
        <td>Question 1?</td>
        <td>387</td>
        <td><input type="checkbox" name="questions[]" value="387"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 2?</td>
        <td>386</td>
        <td><input type="checkbox" name="questions[]" value="386"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 3?</td>
        <td>385</td>
        <td><input type="checkbox" name="questions[]" value="385"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 4?</td>
        <td>384</td>
        <td><input type="checkbox" name="questions[]" value="384"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 5?</td>
        <td>383</td>
        <td><input type="checkbox" name="questions[]" value="383"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 6?</td>
        <td>382</td>
        <td><input type="checkbox" name="questions[]" value="382"></td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 7?</td>
        <td>381</td>
        <td><input type="checkbox" name="questions[]" value="381"></td>
      </tr>
      <tr>
        <td...

CSS

#questions-pool tr td:last-child,
#questions-pool tr th:last-child {
  text-align: right
}

#questions-pool tr td:not(.dataTables_empty):nth-child(1) {
  cursor: move;
  font-size: 13px;
}

.questions-postfields {
  display: flex;
  flex-direction: column;
}

#questions-pool tr td:not(.dataTables_empty):nth-child(1)::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
}

#questions-pool_wrapper #upper-controls,
#questions-pool_wrapper #lower-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  background: #c1c1c1;
}

#questions-pool_wrapper #upper-controls #questions-pool_length,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  padding-left: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter {
  padding-right: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter label {
  float: none;
  margin: 0;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_filter label,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  font-weight: 700;
}

#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  font-weight: 400;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  float: none;
  margin: 0 0 0 5px;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate a {
  color: #555;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate .paginate_button {
  display: inline-block;
  padding: 5px 10px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 700;
}

#questions-pool_wrapper...

JavaScript

jQuery(function($) {
  function calcStats() {
    var numberOfChecked = $('input[name="questions[]"]:checkbox:checked').length;
    var totalCheckboxes = $('input[name="questions[]"]:checkbox').length;

    $('#stats').html('(' + numberOfChecked + '/' + totalCheckboxes + ')');

    if (numberOfChecked == totalCheckboxes && totalCheckboxes > 0) {
      $('input[name="toggleAll"]:checkbox').prop('checked', true);
    } else {
      $('input[name="toggleAll"]:checkbox').prop('checked', false);
    }
  }

  $('#questions-pool tbody').sortable({
    connectWith: '.lty-question-answer-table tbody',
    handle: 'td.move-handle',
  });

  var questions = $('#questions-pool').DataTable({
    ordering: false,
    dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
    lengthMenu: [
      [10, 50, 100, -1],
      [10, 50, 100, 'All']
    ],
    drawCallback: function(settings) {
      calcStats();
    },
  });

  $('input[name="questions[]"]:checkbox').change(function() {
    calcStats();
  });

  $('input[name="toggleAll"]:checkbox').change(function() {
    var checked = $(this).prop('checked');

    $('input[name="questions[]"]:checkbox').prop('checked', checked);

    calcStats();
  });

  $('#get-selected').click(function() {
    console.log(questions.$('input[type="checkbox"][name="questions[]"]:checked').map(function() {
      return this.value;
    }).get());
  });

  $(document).ready(function() {
    calcStats();
  });
});