How to Check All Checkboxes using JavaScript in a table row emitted by PHP

Question

I am new to PHP. I want to create a script to check all checkboxes in a row, but I am stuck.

PROBLEM

Code is not working with loop.

Here is my output

When I check the checkbox under the Opinion column I want to automatically check all checkboxes in the same row.

Here is my code

To render data and checkboxes for each row I use a server-side PHP loop

JavaScript:

<script>      
$('.allcb').on('click', function() {
    $(this).parent().parent().parent().parent().find('.chk').prop('checked', this.checked);
});
</script>

HTML:

 <?php
        for ($i=0; $i<count($opinion); $i++) {
    //if ($opinion[$i] == "")continue;
        ?>
          <tr>
            <td>
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
             <!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->

      <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
      <?php echo $opinion[$i]?>
    </td>
    <td>
      <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
      <?php echo $action[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
      <?php echo $long_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
      <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
      <?php echo $short_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
      <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
      <?php echo $outlook[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
      <?php echo $rating_type[$i] ?>
    </td>
  </tr>
<?php
        }
?>

Answer 1

A simple way would be if you add some identifier to you TRs so the checkbox "knows" which checkboxes are in the same row.

It would also be possible by checking the parent nodes but this may be a bit unstable (think about restructure the table for example).

function toggleRowCbs(cb) {
  var cbs = document.getElementById(cb.dataset.rowid).querySelectorAll('[type="checkbox"]');
  [].forEach.call(cbs, function(x) {
    x.checked = cb.checked;
  });
}

table,
tr,
td,
th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  text-align: left;
  padding: 2pt 4pt;
}

<table>
  <tr>
    <th>Optionion</th>
    <th>Action</th>
    <th colspan="4">Ratings</th>
    <th>Outlook</th>
    <th>Rating Type</th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th colspan="2">Long Term</th>
    <th colspan="2">Short Term</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th>Current</th>
    <th>Previous</th>
    <th>Current</th>
    <th>Previous</th>
    <th></th>
    <th></th>
  </tr>
  <tr id="row1">
    <td>
      <input type="checkbox" data-rowid="row1" onchange="toggleRowCbs(this)" />Foobar
    </td>
    <td>
      <input type="checkbox" />Maintain
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />Stable
    </td>
    <td>
      <input type="checkbox" />Entity
    </td>
  </tr>
  <tr id="row2">
    <td>
      <input type="checkbox" data-rowid="row2" onchange="toggleRowCbs(this)" />Foobar #2
    </td>
    <td>
      <input type="checkbox" />Maintain
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />Stable
    </td>
    <td>
      <input type="checkbox" />Entity
    </td>
  </tr>
</table>

So your PHP Code would look like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php
    for ($i=0; $i<count($opinion); $i++) { ?>
      <tr id="row<?php echo $i ?>">
        <td>
      <input type="checkbox" data-rowid="row<?php echo $i ?>" onchange="toggleRowCbs(this)" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
      <?php echo $opinion[$i]?>
    </td>
    <td>
      <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
      <?php echo $action[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
      <?php echo $long_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
      <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
      <?php echo $short_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
      <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
      <?php echo $outlook[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
      <?php echo $rating_type[$i] ?>
    </td>
  </tr>
<?php } ?>

Because this is a vanilla JavaScript solution which uses querySelectorAll, dataset and Array.prototype.forEach this may be not running on all browsers you want.