Как сделать появление и пропадание объекта по активации input radio?

Question

[Kardamon90]

При выборе радиокнопки, следующий за ней инпут должен появиться, а при выборе другой радиокнопки скрываться. У меня удалось реализовать функцию наполовину: при выборе радиокнопки инпут появляется, но не скрывается. Как исправить?

<label class="radio">
	<input value="1" name="delivery" type="radio" class="radio__input">
	<span class="radio__fake"></span>
	<span class="radio__text">Доставка</span>
</label>
<input type="text" class="order__form-input input">

$(".radio__input").on("click", function () {
	if ($(this).is(":checked")) {
		$(this).parent().next().addClass('active');
	}
	else {
		$(this).parent().next().removeClass('active');
	};
});

Answer 1

[0xD34F]

const itemSelector = '.radio';
const activeClass = 'active';


// конечно, вы можете и дальше продолжать ковырять jquery
const $items = $(itemSelector).on('change', function() {
  $items.next().removeClass(activeClass);
  $(this).next().addClass(activeClass);
});

// но ведь есть и другой путь
const items = document.querySelectorAll(itemSelector);
const onChange = ({ currentTarget: t }) =>
  items.forEach(n => n.nextElementSibling.classList.toggle(activeClass, n === t));

items.forEach(n => n.addEventListener('change', onChange));

UPD. Наконец-то дождались, теперь использовать js тут необязательно:

.radio:has(:checked) + .order__form-input {
  /* сюда переносим стили, делающие input видимым */
}