jQuery单选按钮事件失效求助：无法监听CHANGE事件获取值

核心问题排查 #

你的代码失效主要有这几个可能性：

1. ID重复冲突：如果有多个支付方式单选按钮，都用id="method"是错误的——HTML中ID必须唯一，这会导致选择器无法正确定位元素。
2. 自定义样式阻断原生事件：你用卡片样式覆盖了单选按钮，若CSS把原生radio设为display: none，会导致它无法接收点击/change事件；另外用户实际点击的是卡片<div>而非radio本身，原生事件自然不会触发。
3. iCheck事件未对应插件：ifChecked是iCheck插件的专属事件，若没引入iCheck库，这段代码完全无效。

分步修复方案 #

1. 先修正HTML结构

给每个单选按钮设置唯一ID，确保label和radio的关联（你的radio已经在label内部，这部分没问题，但ID要改）：

<label>
     <input type="radio" name="method" id="method-pp" value="pp" class="card-input-element" required />
      <div class="card card-default card-input">
        <div class="card-body text-center">
         <img src="img/paypal.png" width="50" /> <br><b>Paypal</b>
       </div>
     </div>
</label>
<label>
     <input type="radio" name="method" id="method-stripe" value="stripe" class="card-input-element" required />
      <div class="card card-default card-input">
        <div class="card-body text-center">
         <img src="img/stripe.png" width="50" /> <br><b>Stripe</b>
       </div>
     </div>
</label>

2. 方案一：绑定卡片点击事件（最直接）

既然用户实际点击的是卡片，直接给卡片绑定事件，同步选中单选按钮并取值：

// 确保DOM加载完成后执行
$(document).ready(function() {
  // 点击卡片时选中对应单选按钮并获取值
  $('.card-input').click(function() {
    const $radio = $(this).closest('label').find('.card-input-element');
    $radio.prop('checked', true);
    console.log($radio.val());
  });

  // 额外监听原生change事件，兼容键盘切换等场景
  $('input[type=radio][name=method]').change(function() {
    console.log($(this).val());
  });
});

3. 方案二：修复原生radio事件触发（若坚持用原生事件）

如果你的CSS把radio设为display: none，改成以下样式（让radio保持可交互但不可见）：

.card-input-element {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

之后直接用原生change事件即可：

$(document).ready(function() {
  $('input[type=radio][name=method]').change(function() {
    console.log($(this).val());
  });
});

额外检查点 #

• 确认jQuery已正确引入，且版本无兼容问题
• 所有JS代码必须放在$(document).ready()中，或放在HTML结构末尾，确保DOM加载完成后再绑定事件

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