Как сделать такую Форму?

Question

[Александр Андропов]

Доброго времени суток друзья. Хочу сделать форму похожую на эту - https://www.cian.ru/razmestit-obyavlenie/

То есть, в зависимости от выбранного варианта, появляются разные кнопки. Можете подсказать пожалуйста по реализации и если есть примеры, то было бы хорошо, так проще учиться.

Спасибо большое заранее.

Answer 1

[Константин Лавровский]

Если грубо - вот так можно сделать

<form action="..." class="form">
	<label for="type">
		<input type="checkbox" class="check-box-one">
		<input type="checkbox" class="check-box-two">
	</label>
	<label for="check-box-one">
		<input type="checkbox" class="next">
		<input type="checkbox" class="next">
	</label>
	<label for="check-box-two">
		<input type="checkbox" class="next">
		<input type="checkbox" class="next">
	</label>
</form>

И код обработки такой

if ($('.check-box-one').prop('checked')){
    $('.check-box-one').slideDown();
}elseif($('.check-box-two').prop('checked')){
	$('.check-box-two').slideDown();
}

По сути всё остальное таким же образом делать можно, изначально в стилях ставьте ненужные поля в ксс display:none, а уже slideDown() их отобразит

Answer 2

[Lord_Dantes]

По сути все просто. Вы контролите выбор одного из двух инпутов на условие change, и в зависимости показываете\добавляете классы другим инпутам которые нужны показываться

Comments

[Александр Андропов]

спасибо! был бы пример ещё) было бы замечательно) я только знакомлюсь с js / jquery

[Lord_Dantes]

Александр Андропов,
change - https://www.geeksforgeeks.org/jquery-change-with-e...
if - https://learn.javascript.ru/ifelse
show - show functions

Вот по сути функции по крайней мере могут помочь, смотрите change и потом внутрии нее if если инпут с классом таким-то, то записываете заранее скрытому блоку инпутов, show блоку и он показывается.