本文讲解如何使用 jquery 正确控制 laravel 重复器（repeater）中所有同名输入框的显隐状态，解决因重复 id 导致仅操作首个元素的问题，并提供可直接运行的修复方案。
本文讲解如何使用 jquery 正确控制 laravel 重复器（repeater）中所有同名输入框的显隐状态，解决因重复 id 导致仅操作首个元素的问题，并提供可直接运行的修复方案。
在使用 Blade 模板循环渲染表单行（如学生成绩录入）时，常见需求是：当用户从下拉菜单（如 #mapel_id）中选择特定科目（如 ID 为 17 或 18 的课程）时，所有重复行中的 nilai_sikap 输入框应统一显示；否则全部隐藏。但原始代码存在两个关键缺陷：
- ID 重复问题：@foreach 中为每个 <input> 设置了相同 id="nilai_sikap" —— HTML 规范禁止重复 ID，jQuery 的 $("#nilai_sikap") 仅匹配第一个元素，导致 .show() 仅作用于首行；
- 变量 $i 未定义：脚本中出现未声明的 $i，属于语法错误，且无必要（批量操作无需手动索引）。
✅ 正确做法是移除重复 ID，改用 name 属性精准定位所有目标元素。修改后的 HTML 与 JavaScript 如下：
<!-- 移除 id，保留语义化 name -->
<tbody>
@foreach($siswas as $key => $nilai)
<tr>
<td>
<input type="text" class="form-control" name="nilai_sikap[]" />
</td>
</tr>
@endforeach
</tbody>
<!-- 下拉选择器（确保存在且 ID 正确） -->
<select id="mapel_id">
<option value="">请选择科目</option>
<option value="17">道德素养</option>
<option value="18">行为表现</option>
<option value="19">其他科目</option>
</select>// 使用 name 属性选择所有匹配 input 元素
$('#mapel_id').on('change', function() {
const selectedValue = this.value;
const $inputs = $('input[name="nilai_sikap[]"]');
if (selectedValue == '17' || selectedValue == '18') {
$inputs.show(); // 显示所有同名输入框
} else {
$inputs.hide(); // 隐藏所有同名输入框
}
}).trigger('change'); // 初始化状态? 注意事项：
- ✅ 始终避免在循环中使用重复 id，优先用 class 或 name 进行批量操作；
- ✅ 使用 $('input[name="xxx[]"]') 是处理 PHP 数组型表单字段的标准 jQuery 写法；
- ✅ 若需更精细控制（如按行条件显示），可结合 $(this).closest('tr') 定位当前行，但本场景只需全局显隐；
- ✅ 推荐添加 CSS 初始状态（如 input[name="nilai_sikap[]"] { display: none; }），避免页面加载闪动。
通过以上调整，即可实现下拉选择后，所有重复行中的输入框同步显示或隐藏，彻底解决“只生效第一行”的问题。
