Как переключать radio input кликая на ссылки на JQuery?

Question

[Nickzubov]

Есть несколько radio кнопок

<input type="radio" name="type" id="type1" value="" checked>
<input type="radio" name="type" id="type2" value="">
<input type="radio" name="type" id="type3" value="">
<input type="radio" name="type" id="type4" value="">

И так же есть 4 ссылки:

<a href="#" id="type11" class="active">1</a>
<a href="#" id="type22">2</a>
<a href="#" id="type33">3</a>
<a href="#" id="type44">4</a>

Как на jquery переключать radio в зависимости от класса active у ссылок?
Т.е если класс active на второй ссылке то radio так же на второй input переключается и так далее?

Answer 1

[0xD34F]

О каких элементах и классе идёт речь:

const linkSelector = 'a[id][href="#"]';
const radioSelector = 'input[name="type"]';
const className = 'active';

Вот jquery:

const $links = $(linkSelector).click(function() {
  $radios.eq($links.index(this)).prop('checked', true).trigger('change');
});

const $radios = $(radioSelector).change(function() {
  $links.removeClass(className).eq($radios.index(this)).addClass(className);
});

А вот jquery нет:

const links = document.querySelectorAll(linkSelector);
links.forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  const radio = radios[Array.prototype.indexOf.call(links, this)];
  radio.checked = true;
  radio.dispatchEvent(new Event('change'));
});

const radios = document.querySelectorAll(radioSelector);
radios.forEach(function(n) {
  n.addEventListener('change', this);
}, function() {
  const index = Array.prototype.indexOf.call(radios, this);
  links.forEach((n, i) => n.classList.toggle(className, i === index));
});

Comments

[Nickzubov]

Спасибо! Всё работает. Но почему-то не засчитывается за клик по radio.
Когда я смотрю в исходном коде(браузера) и переключаю radio клацая по ссылкам, radio переключается но вот значение "checked" не передается

[0xD34F]

Nickzubov, и не должно.

[Nickzubov]

0xD34F, А как сделать чтобы переключался checkbox значение тоже?

[0xD34F]

Nickzubov, я не понимаю, что вы говорите. Ни о каких чекбоксах речи не шло.

[Nickzubov]

0xD34F,
"Как на jquery переключать radio в зависимости от класса active у ссылок?"
Я ведь написал в вопросе. "Переключать" соответственно подразумевается нажатие..
Иначе какой смысл переключать radio если он не выполняет свою прямую функцию?

[0xD34F]

Nickzubov, окей, продолжим разговор, когда вы протрезвеете.