Select Multiple Checkbox with datatables

Question

I tried to get the value of the check box for each row I have two textbox to store it and separate each value by comma. The problem is when I paginate or use search in datatable the value of two textbox is resetting with the value that I checked in another page or search. It should be continuously storing the value.

 $(".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" />

Answer 1

its a problem of variable:

 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" />

if you keep only 2 checkboxes, you could simplify and generalize your code:

 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" />