Блог

Переключатели, первый из которых установлен по умолчанию:

   <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);
}
  

Даже если я вручную переключаю переключатели и выбираю второй, jQuery продолжает получать значение первого переключателя, независимо от выбора пользователя.

Почему это? Я не могу найти решение.

Правка 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>