如何实现表格中行内复选框勾选时对应输入框设为必填项

我来帮你搞定这个需求！咱们一步步来完善代码，实现勾选复选框时动态设置对应输入框为必填项的功能：

第一步：修改HTML中的点击事件 #

首先要给makerequired函数传递当前触发事件的复选框元素，这样函数才能知道是哪一行的复选框被操作了。把每个checkbox的onclick属性改成makerequired(this)：

<table>
  <tr>
    <td>S.no.</td>
    <td>Required Capacity</td>
    <td>Action</td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="text" id="src2"/></td>
    <td><input type="checkbox" onclick="makerequired(this)"></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input type="text" id="src3"/></td>
    <td><input type="checkbox" onclick="makerequired(this)"></td>
  </tr>
  <tr>
    <td>3</td>
    <td><input type="text" id="src4"/></td> <!-- 原代码id重复，建议改成唯一值 -->
    <td><input type="checkbox" onclick="makerequired(this)"></td>
  </tr>
</table>

第二步：完善makerequired函数 #

接下来在JavaScript里实现核心逻辑：通过传入的复选框元素找到它所在的行，再定位到该行的文本输入框，最后根据复选框的勾选状态设置required属性：

function makerequired(checkbox) {
  // 找到当前复选框所在的表格行
  const row = checkbox.closest('tr');
  // 找到该行中的文本输入框
  const input = row.querySelector('input[type="text"]');
  
  // 根据复选框的勾选状态设置required属性
  if (input) {
    input.required = checkbox.checked;
  }
}

逻辑说明 #

• checkbox.closest('tr')：向上查找最近的<tr>元素，精准定位当前复选框所在的行。
• row.querySelector('input[type="text"]')：在当前行内筛选出文本类型的输入框。
• input.required = checkbox.checked：直接将复选框的勾选状态映射给输入框的必填属性——勾选时输入框变为必填，取消勾选时自动移除必填限制。

另外提个小建议：原代码里有两个输入框的id都是src3，这不符合HTML规范（id必须全局唯一），建议改成src2、src3、src4这类唯一值，避免后续出现潜在问题。

内容的提问来源于stack exchange，提问作者Avnish Bhardwaj