如何在同一行中选中具有不同名称的所有复选框

我有html表如下面的代码，如何检查在同一行不同名称的所有复选框??例如在"项目名称1"一行中:如果我选中";check all"复选框，然后选中";Date of Start: 2022-04-01"还有那盒"结束日期:2022-04-30"将自动检查

<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>

非常感谢楼主的分享&提前支持!

在这个例子中，我添加了一个<fieldset>作为复选框的(近)父。事件侦听器将查找表单中的任何更改。在if()语句中，我确定它是否为"Check all";这改变了。如果是这样，那么最近的字段集中的所有输入元素应该具有相同的值。

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 class name = "checkall"
  if (field.className == 'checkall') {
    // 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[]" class="checkall" 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>

我发现一个类似的答案从网络如下，但如何删除复选框，如果点击取消选中，需要重写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" class="select-all"  value="Check / Uncheck" />
    <input type="checkbox" class="check" />Mark
    <input type="checkbox" class="check" />Frank</div>
<div id="div2">
    <input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
    <input type="checkbox" class="check" />John
    <input type="checkbox" class="check" />Travis
    <input type="checkbox" class="check" />Matt</div>
<div id="div3">
    <input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
    <input type="checkbox" class="check" />Lee
    <input type="checkbox" class="check" />Charles</div>
    <script type="text/javascript">
$('.select-all').on('click', function () 
{
    $(this).nextAll('.check').prop('checked', true);
});
  </script>

</body>
</html>

相关内容

最新更新

热门标签：