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

Question

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

$(".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>0,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>0,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>,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>3,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>2,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>2,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>7,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>7,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>5,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>3,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>,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>2,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>0,600</td>
      </tr>



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

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

Answer 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>0,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>0,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>,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>3,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>2,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>2,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>7,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>7,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>5,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>3,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>,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>2,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>0,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>0,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>0,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>,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>3,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>2,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>2,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>7,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>7,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>5,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>3,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>,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>2,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>0,600</td>
      </tr>



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

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

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

Select Multiple Checkbox with datatables

javascript

jquery

html-table

datatables

datatables-1.10