Как при нажатии удалять атрибут одному тегу и сразу же применять его к другому?

Question

[JP_Cool]

Есть 3 ссылки внутри li (таба):

<ul class="tabs">
	<li class="tab col s12 m4">
		<a class="active" href="#customLink">
			<label>
			  <input checked="checked" name="type" type="radio" value="customLink">
				<span>Звичайне посилання</span>
			</label>
		</a>
	</li>
	<li class="tab col s12 m4">
		<a href="#articleLink">
			<label>
				<input name="type" type="radio" value="articleLink">
				<span>Статті</span>
			</label>
		</a>
	</li>
	<li class="tab col s12 m4">
		<a href="#adsLink">
			<label>
				<input name="type" type="radio" value="adLink">
				<span>Оголошення</span>
			</label>
		</a>
	</li>
</ul>

Мой вопрос: как при нажатии на ссылку внутри таба, удалять значение checked тегу input внутри ссылки, у которого он уже есть и применять тому, на ссылку которого нажали?

Comments

[dollar]

Странный вопрос. И так всё работает.

Answer 1

[Дмитрий Беляев]

Так как у нас type="radio" - то checked может быть только 1 из группы с одинаковым name
Так что достаточно нужному инпуту установить свойство checked в truetargetInput.checked = true;
надеюсь найти нужный инпут проблем нет?

Comments

[JP_Cool]

Я новачек, поможете найти ещё нужный input?

[Дмитрий Беляев]

JP_Cool,

$('.tabs>.tab>a').on('click', function(e) { //находим все ссылки и подписываемся на их клик
  e.preventDefault(); //блочим стандартный переход по ссылке
  $(this).find('input').get(0).checked = true; //в нажатой ссылке ищем input, извлекаем из JQuery нативный DOM-элемент и устанавливаем в него свойство
});

[JP_Cool]

Дмитрий Беляев, В принципе работает, но почему когда смотреть на код в инструментах гугл атрибут checked не появляется и не удаляется?

[Сергей delphinpro]

JP_Cool, Потому что таким образом меняется внутреннее свойство инпута. Чтобы изменить атрибут, можно использовать соответствующий метод jquery или dom-элемента

$(this).find('input').attr('checked', true);
$(this).find('input').get(0).setAttribute('checked', true);