samedi 16 avril 2022

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

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%" class="tblListForm">
<tbody><tr class="listheader">
<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 class="evenRow">
<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 class="oddRow">
<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 class="listheader">
<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!




Aucun commentaire:

Enregistrer un commentaire