Найти индекс выбранной радиокнопки

Question

$('.step_1').each(function() {
  if ($(this).prop("checked") == true) {
    step1 = $(this).index();
    console.log(step1);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="radios">
  <div>
    <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
  </div>
  <div>
    <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
  </div>
  <div>
    <label class="step_radio">
            <input class="step_1" type="radio" name="step_1" />
        </label>
  </div>
</div>

Консоль показывает только одни нули. Нужно найти индекс выбранной радиокнопки с классом step_1. Как это сделать?

Answer 1

С помощью forEach для каждой радиокнопки назначаете слушатель события, который при клике выведет в консоль индекс кнопки:

const step = document.querySelectorAll('.step_1');

step.forEach((element, index) => {
  element.addEventListener('click', () => {
    console.log(index)
  })
});

<div class="radios">
<div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
</div>
<div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
</div>
<div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
</div>
</div>

Answer 2

У Jquery есть метод index. Можно использовать его:

$('.step_1').on('click', function() {  
    console.log($('.step_1').index(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="radios">
  <div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
  </div>
  <div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
  </div>
  <div>
    <label class="step_radio">
        <input class="step_1" type="radio" name="step_1" />
    </label>
  </div>
</div>

БЛОГ НА HUSL

Найти индекс выбранной радиокнопки

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