如何实现基于动态输入的特定复选框选择性批量勾选

实现思路 #

• 用隐藏输入存储目标用户的标识列表（推荐用JSON格式，方便直接解析为数组）
• 给「选择用户组」按钮绑定点击事件，读取并解析目标用户列表
• 遍历所有用户复选框，对比标识后设置对应勾选状态

代码实现 #

HTML 结构

<!-- 隐藏输入：存储目标用户的标识列表（JSON格式） -->
<input type="hidden" id="target-users" value='["user_001", "user_003", "user_005"]'>

<!-- 选择用户组按钮 -->
<button id="select-user-group">选择用户组</button>

<!-- 用户复选框区域（示例结构） -->
<div id="is_access_manager_department_choices">
  <input type="checkbox" value="user_001"> 用户A
  <input type="checkbox" value="user_002"> 用户B
  <input type="checkbox" value="user_003"> 用户C
  <input type="checkbox" value="user_004"> 用户D
  <input type="checkbox" value="user_005"> 用户E
</div>

jQuery 代码

// 绑定选择用户组按钮的点击事件
$("#select-user-group").click(function() {
  // 读取隐藏输入的内容并解析为用户标识数组
  const targetUsers = JSON.parse($("#target-users").val());
  
  // 遍历所有用户复选框，设置勾选状态
  $('#is_access_manager_department_choices input[type=checkbox]').each(function() {
    // 检查当前复选框的标识是否在目标用户数组中
    const isTargetUser = targetUsers.includes($(this).val());
    $(this).prop('checked', isTargetUser);
  });
});

补充说明 #

• 如果你的用户标识不是存在复选框的value属性里，而是id或data-user-id这类自定义属性，只需要把$(this).val()改成对应的取值方式即可，比如$(this).attr('data-user-id')
• 隐藏输入的JSON字符串要确保格式正确：外层用单引号包裹，内部属性/值用双引号，避免解析报错

内容的提问来源于stack exchange，提问作者Steve Smith