How to get the id of all checked checkbox data from datatable in php jquery

Question

I am using checkboxes in all rows so that when each checkbox is checked I get their Id, everything is working fine with what I have implemented but the problem is that I only get The page of the specific checked ID data table. Meaning if I check the checkbox for one data from page 1 and also check the checkbox for other data from page 2 then when I submit I only get the data from page 2. What I want is that I should get the data with Id's from page1, page2, page3 etc.

This is where all my data comes from

@foreach($data as $key => $question_bank)

  <tr id="{{ $question_bank->id }}">
    <td>
        
        <input type="checkbox" data-id="{{ $question_bank->id }}" class="add_check">

    </td>
    <td>{{ $i}}</td>
    <td>{{ $question_bank->questionCategory->category }}</td>
    <td>{{$question_bank->question}}</td>
    
    
  </tr>

@endforeach

<button type="submit" id="add_to" class="mt-3 btn btn-primary float-right">Add</button>

This is my jquery part

$(document).on('click','#add_to',function(e){
  e.preventDefault();
  var questionids_arr = [];
  $("input:checkbox[class=add_check]:checked").each(function () {
     questionids_arr.push($(this).attr('data-id'));
  });
  console.log(questionids_arr);

  
  return false;
});

Answer 1

You need to save the selected ID to a hidden field in the form.

<input type="hidden" id="selectedValues" name="selectedValues">

Add onclick() checkbox and add the following function to JavaScript.

function addRemove(id){
  // const selectedIds = $('#selectedValues').val();
  var selectedIds = JSON.parse($('#selectedValues').val());
  
  console.log(selectedIds);
  if($('#' + id).is(":checked")){
    //Add if id not there in array
    selectedIds.push(id);
  }else{
    //Remove from the array
    selectedIds = selectedIds.filter(function(item) {
        return item !== id
    })
  }
  
   $("#selectedValues").val(JSON.stringify(selectedIds));
   console.log(selectedIds)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onclick="addRemove('vehicle1')"> Bike
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" onclick="addRemove('vehicle2')"> Car


<input type="hidden" name="selectedValues" id="selectedValues" value="[]">

Answer 2

I think you want to add or remove items from the array and it can be used for pagination of the data table. I found a working solution, you can check if it works for you Checkboxes in DataTables need to capture all checked values