How to check all checkboxes with different names in the same row-CodePudding

I Have html table as below code, How to check all checkboxes with different names in the same row?? Such as in the row of "Item name 1": if I check the box of "Check all", and then the box of "Date of Start: 2022-04-01" and the box of " Date of End: 2022-04-30" will be auto checked.

<table border="1" cellpadding="10" cellspacing="1" width="100%" >
<tbody><tr >
<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('tbid[]');
  for(var i=0, n=checkboxes.length;i<n;i  ) {
    checkboxes[i].checked = source.checked;
  }
}
</script>
<td style="width:10%"><input type="checkbox" onclick="toggle(this)">Quantity/Select All</td>
<td style="width:67%"> Item Details </td>
<td style="width:10%; text-align:right;"> Unit Price </td>
<td style="width:13%; text-align:right;"> Sub-total </td>
</tr>
<tr >
<td style="vertical-align:top">
    <input type="checkbox" name="tbid[]" value="238"> 1</td>
<td style="vertical-align:top">
    Item name 1     <br>
    <input type="checkbox" name="item_no[]" value="1"> Check all<input type="checkbox" name="item_date_start[]" value="2022-04-01">Date of Start: 2022-04-01<input type="checkbox" name="item_date_end[]" value="2022-04-30"> Date of End: 2022-04-30</td>
<td style="vertical-align:top; text-align:right;">
    105.00</td>
<td style="vertical-align:top; text-align:right;">
    105.00</td>
</tr>
<tr >
<td style="vertical-align:top">
    <input type="checkbox" name="tbid[]" value="239"> 1</td>
<td style="vertical-align:top">
    Item name 2<br>
    <input type="checkbox" name="item_no[]" value="17"> Check all<input type="checkbox" name="item_date_start[]" value="2022-05-01">Date of Start: 2022-05-01<input type="checkbox" name="item_date_end[]" value="2022-05-31"> Date of End: 2022-05-31</td>
<td style="vertical-align:top; text-align:right;">
    250.00</td>
<td style="vertical-align:top; text-align:right;">
    250.00</td>
</tr>




<tr >
<td></td>
<td></td>
<td style="vertical-align:top; text-align:right;">  Total (HKD): </td>
<td style="vertical-align:top; text-align:right;">  355.00</td>
</tr>

</tbody>
</table>

Thank you very much for your sharing & support in advance!

CodePudding user response：

In this example I added a <fieldset> as a (near) parent to the checkboxes. The event listener will look for any change in the form. In the if() statement I determine if it was a "Check all" that changed. If so, all the input elements in the closest fieldset should have the same value.

document.forms.form01.addEventListener('change', e => {
  // the field that just changed
  let field = e.target;
  // somehow determine if the change was
  // on a "Check all" field -- here if value = 1
  if (field.type == 'checkbox' && field.value == '1') {
    // get the parent fieldset
    let fieldset = e.target.closest('fieldset');
    // for each element in fieldset
    [...fieldset.elements].forEach(input => {
      // all should have the same value as "check all"
      input.checked = field.checked;
    });
  }
});

<form name="form01">
  <table>
    <tr>
      <td style="vertical-align:top">
        <fieldset>
          <label><input type="checkbox" name="item_no[]" value="1">Check all</label>
          <label><input type="checkbox" name="item_date_start[]" value="2022-04-01">Date of Start: 2022-04-01</label>
          <label><input type="checkbox" name="item_date_end[]" value="2022-04-30"> Date of End: 2022-04-30</label>
        </fieldset>
      </td>
    </tr>
  </table>
</form>

CodePudding user response：

I find a similar answer from the web as below, but how to remove checkbox if click Uncheck, need to rewrite the javascript.

<!DOCTYPE html>
<html>
<head>

  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script
    type="text/javascript"
    src="//code.jquery.com/jquery-1.9.1.js"
  ></script>
</head>

<body>

<div id="div1">
    <input type="button" id="btnDiv1"   value="Check / Uncheck" />
    <input type="checkbox"  />Mark
    <input type="checkbox"  />Frank</div>
<div id="div2">
    <input type="button" id="btnDiv2"  value="Check / Uncheck" />
    <input type="checkbox"  />John
    <input type="checkbox"  />Travis
    <input type="checkbox"  />Matt</div>
<div id="div3">
    <input type="button" id="btnDiv3"  value="Check / Uncheck" />
    <input type="checkbox"  />Lee
    <input type="checkbox"  />Charles</div>

    <script type="text/javascript">
$('.select-all').on('click', function () 
{
    $(this).nextAll('.check').prop('checked', true);
});

  </script>


</body>
</html>