How can I check a checkbox depending on what row using jQuery?

What I have tried is to make a checkbox when clicked it automatically checks the other checkbox from it’s row but when I tried to check the other rows, it does not work. I’ve tried to make a loop but instead of checking each, it checks all. I hope someone can help me. Thank you so much in advance!

Here is my whole code, I am using dataTables

$(document).ready(function() {
    $('#is_checked_status').on('click', function() {
        var checkAll = this.checked;
        $('input[id=subCheckbox]').each(function() {
            this.checked = checkAll;
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Emailed Data for approval
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div class="table-responsive">


          <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
            <thead>
              <tr>
                <th> Control Number </th>
                <th> Tools Specification </th>
                <th> Supplier </th>
                <th>
                  <center> Status </center>
                </th>
                <th>
                  <center> Select data to approve </center>
                </th>
                <th>
                  <center> ID </center>
                </th>
              </tr>
            </thead>
            <?php
               $con->next_result();
               $result = mysqli_query($con,"CALL GetAllRequestedTools()"); ?>
              <tbody>
                <?php 
                  while ($row = mysqli_fetch_assoc($result)) 
                  {                                                                               
                          echo "<tr>";
                          echo "<td><a href='edit_tools_approval.php? 
                          ID=".$row['ID']."' style='color:red;'>" . 
                          $row['reg_input'] . "</a></td>";
                          echo "<td>" . $row['reg_tools_spec'] . "</td>"; 
                          echo "<td>" . $row['reg_supplier'] . "</td>";
                ?>

                <td>
                  <center>
                    <label data-id="<?php echo $row['ID'];?>" class="statusButton <?php echo ($row['req_stats'])? 'label-success': 'label-danger'?>">
                                                                                <?php echo ($row['req_stats'])? 'Approved' : 'Pending'?>
                                                                            </label>
                  </center>
                </td>

                <td>
                  <center>
                    <input name="chk_status[]" id="is_checked_status" type="checkbox" value="<?php echo $row['req_stats'];?>">
                  </center>
                </td>

                <td>
                  <center>
                    <input name="chk_id[]" type="checkbox" id="subCheckbox" value="<?php echo $row['ID'];?>">
                  </center>
                </td>

                <?php
                                                                        echo "</tr>";
                                                                    }
                                                                    ?>
              </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>
</div>

Answer

Ids are singular so you can not use an id multiple times. Change all of the ids to a class.

After you remove the ids and swap it to a class. You will need find the row the checkbox is in. And then select all the checkboxes in that row.

$(document).ready(function() {
  $('.is_checked_status').on('click', function() {
    var checkAll = this.checked;
    // find the row
    var row = $(this).closest("tr");
    // find the checkboxes in the row
    row.find('input.subCheckbox').each(function() {
      this.checked = checkAll;
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" class="is_checked_status" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="is_checked_status" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
    <td><input type="checkbox" class="subCheckbox" /></td>
  </tr>
</table>

Advertisement

Answer