如何從php jquery中的資料表中取得所有選取的複選框資料的id

Question

我在所有行中都使用了複選框，這樣當每個複選框被選中時，我都會得到它們的Id，一切都與我所實現的工作正常，但問題是我只得到特定的已檢查Id資料表的頁。意味著如果我選中了第 1 頁中的一個資料的複選框，並且還選中了第 2 頁中的其他資料的複選框，那麼當我提交時，我只得到第 2 頁的資料。我想要的是我應該獲得的 Id來自 page1、page2、page3 等的資料。

這是我所有資料的來源

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

這是我的 jquery 部分

$(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

您需要將選取的 ID 儲存到表單中的隱藏欄位中。

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

新增 onclick() 複選框並將以下函數新增至 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

我認為您希望在陣列中新增或刪除項目，並且它可以用於資料表的分頁。我找到了一個可行的解決方案，您可以檢查它是否適合您 DataTables中的複選框需要捕獲所有選中的值