jQuery 如果默认选中，则会不断获取错误单选按钮的值

Question

单选按钮，默认选中第一个：

  <div class="shipping">
    <div class="title">Select shipping method</div>
    <label><input type="radio" name="shipping" value="courier-dpd" checked="checked">Courier DPD</label>
    <label><input type="radio" name="shipping" value="personal">Personal pick up</label>
    <button>Next</button>
  </div>

Js:

$(document).on('click', '.shipping button', function() {
  let val = $('.shipping').find('input[name="shipping"]:checked').val()
  console.log(val);
}

即使我手动切换单选按钮和 select 第二个单选按钮，jQuery 仍会独立于用户 selection 获取第一个单选按钮的值。

这是为什么？我找不到解决方案。

Answer 1

编辑 2： 从更新的问题中添加了 JS 代码。似乎在这里工作。

编辑：添加了提交按钮以演示提交操作。

那么，您是在更改值后调用 console.log 吗？我在下面创建了一个片段，它工作正常。

$(function() {
  let val = $('.shipping').find('input[name="shipping"]:checked').val()
  console.log(val);

  /*$('#btn').on('click', function() {
    let val = $('.shipping').find('input[name="shipping"]:checked').val()
    console.log(val);
  })*/

  $(document).on('click', '.shipping button', function() {
    let val = $('.shipping').find('input[name="shipping"]:checked').val()
    console.log(val);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shipping">
  <div class="title">Select shipping method</div>
  <label><input type="radio" name="shipping" value="courier-dpd" checked="checked">Courier DPD</label>
  <label><input type="radio" name="shipping" value="personal">Personal pick up</label>
  <button>Next</button>
</div>

jQuery 如果默认选中，则会不断获取错误单选按钮的值

jQuery keeps getting value of wrong radio button if checked by default

javascript

jquery

default

radio-button