如何修改所有包含同名radio按钮的div元素样式？

原脚本问题分析 #

你当前的脚本逻辑存在错误：遍历每个radio后，又对单个radio做each循环，相当于只处理当前radio所在的div，完全没触及其同组的其他radio对应的div，所以只能修改选中项的div样式，无法实现同组批量标记。

正确实现思路 #

要达成需求，核心是按radio的name分组处理：

1. 先提取所有不重复的radio name，避免重复处理同一组
2. 对每个name对应的radio组，检查是否有至少一个选项被勾选
3. 根据检查结果，给该组所有radio的父div统一设置背景色

修改后的代码 #

// 获取表单内所有radio的不重复name集合
const radioNames = $(form).find(".radio_m").map(function() {
  return this.name;
}).get().filter((name, index, self) => self.indexOf(name) === index);

// 遍历每个radio组
radioNames.forEach(name => {
  // 选中当前name对应的所有radio
  const radioGroup = $(form).find(`input[name='${name}']`);
  // 检查该组是否有被勾选的选项
  const hasChecked = radioGroup.is(":checked");
  
  // 获取该组所有radio的父div，批量设置背景色
  const groupDivs = radioGroup.closest("div");
  if (hasChecked) {
    groupDivs.css("background-color", "transparent");
  } else {
    groupDivs.css("background-color", "#F3A3A3");
  }
});

代码说明 #

• 去重name：用map提取所有radio的name，再用filter去重，确保每个radio组只被处理一次
• 分组检查：通过input[name='${name}']精准定位同组所有radio，用is(":checked")判断该组是否有选中项
• 批量修改样式：找到同组所有radio的父div，一次性设置背景色，实现同组div的统一标记

效果示例 #

• 若勾选name为1-a的任意radio，则第1、2个div背景变为透明，第3、4个div（对应2-a组，未勾选）背景变为红色
• 若同时勾选1-a和2-a的选项，则所有div背景都为透明
• 若两组都未勾选，则所有div背景都为红色

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