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

【问题标题】：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" />

【问题讨论】：

    标签： javascript jquery html-table datatables datatables-1.10


    【解决方案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 已修复！
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-17
    • 2023-04-02
    • 2012-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode