Laravel中使用多个toggle开关仅能获取首个元素ID如何解决

问题原因 #

HTML 规范要求id属性全局唯一，你在循环中给所有权限ID文本框都设置了相同的id="id"，使用$('#id')选择器时只会返回匹配到的第一个元素，因此永远只能拿到第一个权限的ID值。

解决方案 #

推荐直接把权限ID存入开关的自定义属性，不需要依赖额外的文本框取值，修改成本最低：

1. 修改Blade模板代码

@foreach ($permissionlist as $pl)
<label class="switch">
    <input 
        type="checkbox" 
        name="onoffswitch" 
        data-permission-id="{{ $pl->permissionid }}"
        {{ $pl->roleisactive ? 'checked' : '' }}
    >
    <span class="slider round"></span>
</label>
<!-- 原文本框如果需要保留，建议把id改为class，避免重复id问题 -->
<input type="text" name="permission_id[]" class="permission-id" value="{{$pl->permissionid}}">
@endforeach

这里同时简化了原来的PHP判断写法，用Blade自带的三元输出语法更简洁。

2. 修改JS事件代码

<script type="text/javascript">
    $('input[name=onoffswitch]').click(function(){
        // 从当前点击的开关的自定义属性直接取对应权限ID
        const id = $(this).data('permission-id');
        // 获取开关状态，比直接取val()更准确
        const status = $(this).is(':checked') ? 1 : 0;
        alert(id);
    });
</script>

如果你的业务必须从相邻的文本框取值，也可以通过DOM相对路径查找，不需要依赖ID：

const id = $(this).closest('label').next('.permission-id').val();

内容的提问来源于stack exchange，提问作者Cansu Koç