jQuery为父div内单选框绑定选中状态与点击事件问题排查

看起来你遇到的核心问题是事件冒泡干扰以及对radio元素属性操作的误解，导致点击事件无法按预期工作。咱们一步步拆解问题并修复：

现有代码的核心问题 #

1. 事件冒泡冲突：点击.contPosition input时，事件会冒泡到父元素.contPosition，触发父元素的click事件，导致radio的选中状态被重复切换，直接掩盖了子元素点击事件的效果。
2. Radio的val()操作误区：Radio按钮的val()对应的是其value属性，设置它并不会改变选中状态——你大概率是想选中.contPrintPosition里对应的radio，而非修改它的value值。
3. 自定义单选取消逻辑的作用域问题：this.previous没有正确保存状态，每次点击都会重新赋值，根本无法实现“点击已选中radio取消选中”的效果。

修复后的完整代码 #

<div id="contPosition">
  <div class="contPosition">
    <input type="radio" class="posPrint1" name="positionGroup" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint2" name="positionGroup" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint3" name="positionGroup" />
  </div>
</div>

<div id="contPrintPosition">
  <div class="contPrintPosition">
    <input type="radio" class="posPrint1" name="printGroup" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint2" name="printGroup" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint3" name="printGroup" />
  </div>
</div>

<script>
// 父div点击切换radio选中状态
jQuery('.contPosition').click(function (e) {
  // 仅当点击的不是radio本身时才执行切换，避免冒泡重复触发
  if (!$(e.target).is('input[type=radio]')) {
    const $radio = $(this).find('input:radio');
    $radio.prop('checked', !$radio.prop('checked'));
    // 手动触发change事件，同步执行后续关联逻辑
    $radio.trigger('change');
  }
});

// 用change事件监听radio状态变化（比click更可靠，兼容键盘等操作）
jQuery('.contPosition input[type=radio]').on('change', function(e) {
  // 阻止事件冒泡到父div，避免重复处理
  e.stopPropagation();
  
  const curCls = $(this).attr('class');
  // 选中.contPrintPosition里对应的radio（这才是你想要的同步选中效果）
  $(`.contPrintPosition > input.${curCls}`).prop('checked', this.checked);
  
  // 如果你确实需要修改radio的value（不常用，一般是固定提交值）：
  // $(`.contPrintPosition > input.${curCls}`).val("Test");
});

// 实现点击已选中radio取消选中的功能
jQuery('.contPosition input[type=radio]').on('click', function(e) {
  // 用data存储之前的选中状态，避免作用域问题
  const wasChecked = $(this).data('wasChecked');
  // 重置同组其他radio的存储状态
  $('.contPosition input[type=radio]').data('wasChecked', false);
  
  if (wasChecked) {
    // 之前是选中状态，现在取消
    $(this).prop('checked', false);
    $(this).data('wasChecked', false);
    // 同步触发change事件，更新另一个区域的状态
    $(this).trigger('change');
  } else {
    // 之前未选中，设置为选中并存储状态
    $(this).data('wasChecked', true);
  }
});
</script>

关键修复点说明 #

• 事件冒泡处理：在父div的click事件里判断点击目标，同时在radio的事件里用e.stopPropagation()阻止冒泡，彻底避免状态被重复修改。
• 用change替代click监听状态：radio的选中状态变化更适合用change事件，因为除了点击，还可能通过键盘等方式改变选中状态，兼容性和可靠性更强。
• 正确操作选中状态：用prop('checked', true/false)设置radio的选中状态，val()仅修改radio的value属性，和选中状态完全无关。
• 自定义取消选中逻辑：用jQuery的data()方法存储每个radio的历史选中状态，避免作用域混乱，完美实现“点击已选中radio取消选中”的需求。
• 规范添加name属性：给同组radio添加name属性是HTML标准做法，即使自定义了单选逻辑，保留name属性也能保证浏览器默认行为的兼容性。

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