Checkboxes in DataTables need to capture all checked values

Question

I am having 100s of items in my datatable, displayed using 'forEach' in script as below

<div class="panel-body">
        <table class="table table-striped" id="table1">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Customer</th>
              
              <th scope="col">CheckBoxes</th>
            </tr>
          </thead>
          <tbody>
            <c:forEach items="${list}" varStatus="status" var="name">
                <tr>      
                    <td>${status.index + 1}</td>
                    <td>${name.getName()}</td>
                    <td>${name.getCustomer()}</td>
                    <td>
                      <input type="checkbox" class="custom-control-input" id="checkRule" value="${rule.getName()}">
                    </td>
                </tr>
            </c:forEach>
          </tbody>
        </table>
      </div>

What I am trying is, upon checking respective checkboxes, I need those value to be fetched and sent in AJAX (POST).

$(document).ready(function(){   
        
        const myArray = [];
        
        $('#checkRule').click(function(){
            console.log('checked');
            
            if( $('#checkRule').is(':checked') ) {
                myArray.push( $('#checkRule').val() );
                console.log(myArray);
            }else{
                const index = myArray.indexOf( $('#checkRule').val() );
                if (index > -1) {
                  myArray.splice(index, 1);
                }
                console.log(myArray);
            }
            
        });
        
        $('#correlation_table').DataTable();
        
        $('#send').click(function(){
            
            var result = myArray;
            console.dir('Import result >>>>> ',result);
            $.ajax({
                   url: "sendAll",
                   headers: {
                       'Accept': 'text/plain',
                       'Content-Type': 'application/json'
                   },
                   type: "POST",
                   dataType: "html",
                   data: JSON.stringify(result),
                   success :function(data) {
                       console.log(data);
                   },
                   error :function(err){
                       console.log(err);
                   }
            });
        });
        
    });

Upon using this above code, I am reaching nowhere. Console output for "console.log('Import result >>>>> ',result);" is

Import result >>>>> Array []

How can I get all 'Name' upon checking multiple checkboxes in table?

Answer 1

You have given same ids to all your checkboxes so only first checkboxes value you will be getting in your array instead use class selector instead of id and then simply use $(this) to get the reference of checkbox change and add those values in your array using .val()

Demo Code :

 $(document).ready(function() { const myArray = []; //use class here $('.checkRule').change(function() { //use `this` to get refernce of current checkbox change if ($(this).is(':checked')) { myArray.push($(this).val()); //put that value } else { const index = myArray.indexOf($(this).val()); if (index > -1) { myArray.splice(index, 1); } } }); $('#correlation_table').DataTable(); $('#send').click(function() { var result = myArray; console.log('Import result >>>>> ', result); //your ajax call.. }); });

 <div class="panel-body"> <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <table class="table table-striped" id="correlation_table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Customer</th> <th scope="col">CheckBoxes</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>sss</td> <td>123</td> <td> <!-- use class instead of id--> <input type="checkbox" class="custom-control-input checkRule" value="ss"> </td> </tr> <tr> <td>2</td> <td>ses</td> <td>23</td> <td> <input type="checkbox" class="custom-control-input checkRule" value="ses"> </td> </tr> <tr> <td>3</td> <td>sswi</td> <td>13</td> <td> <input type="checkbox" class="custom-control-input checkRule" value="sswi"> </td> </tr> <tr> <td>4</td> <td>ssww</td> <td>12</td> <td> <input type="checkbox" class="custom-control-input checkRule" value="ssww"> </td> </tr> </tbody> </table> </div> <button id="send">SEnd</button>