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?

Swati · Accepted Answer · 2020-11-23 05:14:26Z

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>

Hi @Swati Thank for help, it worked just perfectly as I wanted.

Collectives™ on Stack Overflow

Checkboxes in DataTables need to capture all checked values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related