jQuery实现点击时隔离子元素行为仅选中单个产品对应选项

云上老周

2026-10-5

问题根因

你现有代码的问题是使用了全局选择器匹配所有同值复选框，没有限定操作范围，才会出现跨产品联动的问题。

解决思路

点击复选框后，先定位到当前产品的父容器，后续所有DOM操作都只在该父容器内执行，就能实现产品间的操作隔离。

修改后代码

$('[name="subscribe"], [name="not_subscribe"]').off('click').on('click', function (event) {
    // 此处替换为你页面中每个产品模块实际的父容器选择器即可
    const $currentProduct = $(this).closest('.product-item');
    const isSubscribe = $(this).val() === 'subscribe';
    const isChecked = $(this).prop('checked');

    if (isChecked) {
      // 所有查询都限定在当前产品容器内，不会影响其他产品
      $currentProduct.find('input[type="checkbox"][value="not_subscribe"]').prop('checked', !isSubscribe);
      $currentProduct.find('input[type="checkbox"][value="subscribe"]').prop('checked', isSubscribe);
      $currentProduct.find('[data-amrecurring="recurring-settings"]').toggle(isSubscribe);
    } else {
      $currentProduct.find('input[type="checkbox"][value="not_subscribe"]').prop('checked', isSubscribe);
      $currentProduct.find('input[type="checkbox"][value="subscribe"]').prop('checked', !isSubscribe);
      $currentProduct.find('[data-amrecurring="recurring-settings"]').toggle(!isSubscribe);
    }
});