如何从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中的复选框需要捕获所有选中的值