По клику на отправить форму показать индекс выбранной радиокнопки

Question

Вот HTML

    <div class="radios">
        <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
        <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
        <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
    </div>
   <button type="submit" class="submitQuiz">Отправить</button>

Вот JS

$(".submitQuiz").on("click", function (event) {
    event.preventDefault();
    $('.step_1').each(function() {
        if($(this).prop("checked") == true) {
          step1 = $(this).index(this);
          console.log(step1);
        }
    });
});

При клике на submitQuiz нужно вывести индекс выбранной радиокнопки. Но выводит всегда только 0. Как определить индекс?

Answer 1

$(".submitQuiz").on("click", function(event) {
  event.preventDefault();
  
  console.log($('.step_1').index($('.step_1:checked')));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="radios">
  <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
  <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
  <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
</div>
<button type="submit" class="submitQuiz">Отправить</button>

БЛОГ НА HUSL

По клику на отправить форму показать индекс выбранной радиокнопки

Ответы (1 шт):