Question 10809 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

I have used checkbox in all rows, such that when each checkbox will be checked I will get the Id’s of them, everything is working fine with what I have implemented but the issue is that I only get the checked Id’s of the particular page of datatable. Means If I checked the checkbox of one data in page 1 and also checked the checkbox of the other data in page 2, then when I submit I got only the data of page 2. What do I want is that I should get the Id’s of data from page1, page2, page3 and so on.

This is where all my data’s are coming


@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;
});
Tags:

3

Answers


  1. 0

    You need to save the checked ids to a hidden field in the form.

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

    Add onclick() the checkbox and add the below 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="[]">
    Login or Signup to reply.
  2. 0

    In DataTable you can use the following to select a row and push to an array as table.rows( {selected: true} ).every will keep the selection even if you switch between pages.

       table.on('select.dt', function(){
       const arr = [];
       table.rows( {selected: true} ).every( function (rowIdx, 
   tableLoop, rowLoop) {
          arr.push(this.data());
        });
       
       console.log(arr.length, arr);
   });
   
   table.on('deselect.dt', function(){
       const arr = [];
       table.rows( {selected: true} ).every( function (rowIdx, tableLoop, rowLoop) {
          arr.push(this.data());
        });
       
       console.log(arr.length, arr);
   });

    A complete example can be seen in the JSFiddle

    https://jsfiddle.net/greatrin/ayv0jg53/47/

    Note: Not very optimized solution, but this is the idea.

    Login or Signup to reply.
  3. 0

    I think you want to have the both like add or remove items in array as well as it will work on pagination of data table. I found a working solution of it you can check if it works for you Checkboxes in DataTables need to capture all checked values

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search