选择带有数据表的多个复选框

Posted 2023-05-09

技术标签:

【中文标题】选择带有数据表的多个复选框【英文标题】：Select Multiple Checkbox with datatables 【发布时间】：2021-06-06 11:56:26 【问题描述】：

我试图获取每行复选框的值，我有两个文本框来存储它并用逗号分隔每个值。问题是当我在数据表中分页或使用搜索时，两个文本框的值正在重置为我在另一个页面或搜索中检查的值。它应该不断地存储值。

$(".trio").change(function() 
  setValue();
  setValue2();
);

$(".Duo").change(function() 
  setValue();
  setValue2();
);

function setValue() 
  var items = $(".trio");
  var result = [];
  for (var i = 0; i < items.length; i++) 
    var item = $(items[i]);
    if (item.is(":checked")) 
      result.push(item.val());
    
  
  var text = result.join(",");
  $(".DISTRIBUTION").val(text);


function setValue2() 
  var items = $(".Duo");
  var result = [];
  for (var i = 0; i < items.length; i++) 
    var item = $(items[i]);
    if (item.is(":checked")) 
      result.push(item.val());
    
  
  var text = result.join(",");
  $(".DuoC").val(text);


$('.trio').on('click', function() 
  $(this).siblings('.Duo').not(this).prop('checked', false);
);

$('.Duo').on('click', function() 
  $(this).siblings('.trio').not(this).prop('checked', false);
);

$(function() 
  $('#example').DataTable(
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "autoWidth": true,
  );
);

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

<div style="width: 100%; border: 1px solid black; padding: 3px">
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Trio <input class="trio" value='1' name="trio[]" type="checkbox"> Duo <input class="Duo" value='1' Name="Duo[]" type="checkbox"></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='2' name="trio[]" type="checkbox"> Duo <input class="Duo" value='2' Name="Duo[]" type="checkbox"></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='3' name="trio[]" type="checkbox"> Duo <input class="Duo" value='3' Name="Duo[]" type="checkbox"></td>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='4' name="trio[]" type="checkbox"> Duo <input class="Duo" value='4' Name="Duo[]" type="checkbox"></td>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='5' name="trio[]" type="checkbox"> Duo <input class="Duo" value='5' Name="Duo[]" type="checkbox"></td>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='6' name="trio[]" type="checkbox"> Duo <input class="Duo" value='6' Name="Duo[]" type="checkbox"></td>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='7' name="trio[]" type="checkbox"> Duo <input class="Duo" value='7' Name="Duo[]" type="checkbox"></td>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='8' name="trio[]" type="checkbox"> Duo <input class="Duo" value='8' Name="Duo[]" type="checkbox"></td>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='9' name="trio[]" type="checkbox"> Duo <input class="Duo" value='9' Name="Duo[]" type="checkbox"></td>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='10' name="trio[]" type="checkbox"> Duo <input class="Duo" value='10' Name="Duo[]" type="checkbox"></td>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='11' name="trio[]" type="checkbox"> Duo <input class="Duo" value='11' Name="Duo[]" type="checkbox"></td>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>$90,560</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='12' name="trio[]" type="checkbox"> Duo <input class="Duo" value='12.' Name="Duo[]" type="checkbox"></td>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$342,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='13' name="trio[]" type="checkbox"> Duo <input class="Duo" value='13.' Name="Duo[]" type="checkbox"></td>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>$470,600</td>
      </tr>



      </tfoot>
  </table>
</div>
</div>

<br/>TRIO:
<input type="text" class="DISTRIBUTION" />Duo
<input type="text" class="DuoC" />

【问题讨论】：

【参考方案1】：

这是变量的问题：

var duo = [];
var trio = [];


$('.trio').on('click', function() 
  var s = $(this).siblings('.Duo').not(this).prop('checked');
  if ($(this).prop("checked")) 
    trio.push($(this).val());
   else 
    trio.splice(trio.indexOf($(this).val()), 1);
  
  if (s) 
    $(this).siblings('.Duo').not(this).prop('checked', false);
    duo.splice(duo.indexOf($(this).val()), 1);
  

  var text = trio.join(",");
  $(".DISTRIBUTION").val(text);
  text = duo.join(",");
  $(".DuoC").val(text);
);

$('.Duo').on('click', function() 
  var s = $(this).siblings('.trio').not(this).prop('checked');
  if ($(this).prop("checked")) 
    duo.push($(this).val());
   else 
   duo.splice(duo.indexOf($(this).val()), 1);
    
  if (s) 
    $(this).siblings('.trio').not(this).prop('checked', false);
    trio.splice(trio.indexOf($(this).val()), 1);
  

  var text = trio.join(",");
  $(".DISTRIBUTION").val(text);
  text = duo.join(",");
  $(".DuoC").val(text);
);

$(function() 
  $('#example').DataTable(
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "autoWidth": true,
  );
);

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

<div style="width: 100%; border: 1px solid black; padding: 3px">
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Trio <input class="trio" value='1' name="trio[]" type="checkbox"> Duo <input class="Duo" value='1' Name="Duo[]" type="checkbox"></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='2' name="trio[]" type="checkbox"> Duo <input class="Duo" value='2' Name="Duo[]" type="checkbox"></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='3' name="trio[]" type="checkbox"> Duo <input class="Duo" value='3' Name="Duo[]" type="checkbox"></td>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='4' name="trio[]" type="checkbox"> Duo <input class="Duo" value='4' Name="Duo[]" type="checkbox"></td>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='5' name="trio[]" type="checkbox"> Duo <input class="Duo" value='5' Name="Duo[]" type="checkbox"></td>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='6' name="trio[]" type="checkbox"> Duo <input class="Duo" value='6' Name="Duo[]" type="checkbox"></td>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='7' name="trio[]" type="checkbox"> Duo <input class="Duo" value='7' Name="Duo[]" type="checkbox"></td>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='8' name="trio[]" type="checkbox"> Duo <input class="Duo" value='8' Name="Duo[]" type="checkbox"></td>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='9' name="trio[]" type="checkbox"> Duo <input class="Duo" value='9' Name="Duo[]" type="checkbox"></td>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='10' name="trio[]" type="checkbox"> Duo <input class="Duo" value='10' Name="Duo[]" type="checkbox"></td>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='11' name="trio[]" type="checkbox"> Duo <input class="Duo" value='11' Name="Duo[]" type="checkbox"></td>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>$90,560</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='12' name="trio[]" type="checkbox"> Duo <input class="Duo" value='12' Name="Duo[]" type="checkbox"></td>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$342,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='13' name="trio[]" type="checkbox"> Duo <input class="Duo" value='13' Name="Duo[]" type="checkbox"></td>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>$470,600</td>
      </tr>



      </tfoot>
  </table>
</div>
</div>

<br/>TRIO:
<input type="text" class="DISTRIBUTION" />Duo
<input type="text" class="DuoC" />

如果您只保留 2 个复选框，您可以简化和概括您的代码：

var duo = [];
var trio = [];

$('.Duo, .trio').on('click', function() 
  var claz = "." + $(this).attr("class").trim();
  var s = $(this).siblings();
  var a0 = claz == ".trio" ? trio : duo;
  var b0 = claz == ".trio" ? duo : trio;
  if ($(this).prop("checked")) 
    a0.push($(this).val());
   else 
    a0.splice(a0.indexOf($(this).val()), 1);
  
  if (s.prop('checked')) 
    s.prop('checked', false);
    b0.splice(b0.indexOf($(this).val()), 1);
  

  var text = trio.join(",");
  $(".DISTRIBUTION").val(text);
  text = duo.join(",");
  $(".DuoC").val(text);
);

$(function() 
  $('#example').DataTable(
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "autoWidth": true,
  );
);

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

<div style="width: 100%; border: 1px solid black; padding: 3px">
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Trio <input class="trio" value='1' name="trio[]" type="checkbox"> Duo <input class="Duo" value='1' Name="Duo[]" type="checkbox"></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='2' name="trio[]" type="checkbox"> Duo <input class="Duo" value='2' Name="Duo[]" type="checkbox"></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='3' name="trio[]" type="checkbox"> Duo <input class="Duo" value='3' Name="Duo[]" type="checkbox"></td>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='4' name="trio[]" type="checkbox"> Duo <input class="Duo" value='4' Name="Duo[]" type="checkbox"></td>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='5' name="trio[]" type="checkbox"> Duo <input class="Duo" value='5' Name="Duo[]" type="checkbox"></td>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>$162,700</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='6' name="trio[]" type="checkbox"> Duo <input class="Duo" value='6' Name="Duo[]" type="checkbox"></td>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>$372,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='7' name="trio[]" type="checkbox"> Duo <input class="Duo" value='7' Name="Duo[]" type="checkbox"></td>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>$137,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='8' name="trio[]" type="checkbox"> Duo <input class="Duo" value='8' Name="Duo[]" type="checkbox"></td>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>$327,900</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='9' name="trio[]" type="checkbox"> Duo <input class="Duo" value='9' Name="Duo[]" type="checkbox"></td>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>$205,500</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='10' name="trio[]" type="checkbox"> Duo <input class="Duo" value='10' Name="Duo[]" type="checkbox"></td>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>$103,600</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='11' name="trio[]" type="checkbox"> Duo <input class="Duo" value='11' Name="Duo[]" type="checkbox"></td>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>$90,560</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='12' name="trio[]" type="checkbox"> Duo <input class="Duo" value='12' Name="Duo[]" type="checkbox"></td>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>$342,000</td>
      </tr>
      <tr>
        <td>Trio <input class="trio" value='13' name="trio[]" type="checkbox"> Duo <input class="Duo" value='13' Name="Duo[]" type="checkbox"></td>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>$470,600</td>
      </tr>



      </tfoot>
  </table>
</div>
</div>

<br/>TRIO:
<input type="text" class="DISTRIBUTION" />Duo
<input type="text" class="DuoC" />

【讨论】：

这里的问题是您没有删除重复项。例如，当我单击另一个复选框时，您在一个文本框中有 12 个，它应该转移到另一个复选框 @CarlodManlulu 已修复！

以上是关于选择带有数据表的多个复选框的主要内容，如果未能解决你的问题，请参考以下文章

带有Rails的DataTable无法提交多个页面项目

来自数据库的 Extjs GridPanel 选择

Primefaces数据表行选择和多个复选框选择不起作用

如何在颤动中的扩展磁贴内添加带有动态选择复选框的列表视图

Vue - 带有多个复选框的输入

标题和行中带有复选框的Jquery数据表：选择所有复选框不起作用