Как менять textarea при нажатии?

Question

[Артём Цымбалюк]

Добрый вечер.
Существует 2 radio кнопки и 2 textarea

<input type="radio">
<input tyle="radio">

<textarea placeholder="Окно ввода для первой radio кнопки"></textarea>
<textarea placeholder="Окно ввода для второй radio кнопки"></textarea>

Вопрос: как сделать так, что-бы при нажатии на первую радио кнопку, показывался только textarea для неё, а второй textarea был скрыт, так же аналогично со вторым radio при нажатии на него открывался textarea для второй.

Answer 1

[Денис]

Вариант на чистом JS с привязкой по индексу

var textarea = [].slice.call(document.querySelectorAll('textarea'));
[].forEach.call(document.querySelectorAll('[type=radio]'), function(el, i) {
    (function(index) {
        textarea[index].style.display = el.checked ? 'inline' : 'none';
        el.addEventListener('change', function() {
            textarea.forEach(function(ta, i) {
                ta.style.display = i === index ? 'inline' : 'none';
            });
        });
    }(i));
});

Вариант только с использование CSS, если позволяет разметка:

<input type="radio" name="group">
<textarea placeholder="Окно ввода для первой radio кнопки"></textarea>
<input type="radio" name="group">
<textarea placeholder="Окно ввода для второй radio кнопки"></textarea>

textarea {
    display: none;
}
[type=radio] {
    float: left;
}
[type=radio]:checked + textarea {
    display: inline;
}

Comments

[Сергей delphinpro]

добавить парочку классов (или nth-child), использовать селектор "~" и можно заюзать ту разметку, которую указал автор вопроса.

Answer 2

[lega]

jsfiddle.net/lega911/62fknscm

Answer 3

[Alexander Litvinenko]

только через javaScript или извращаясь с :focus в css, но последнее будет слетать при любом клике за пределами области, а нужно будет заменить на какой нибудь div и маскировать его под radio.

Comments

[Артём Цымбалюк]

Alexander Litvinenko я понимаю что это нужно делать через JS) теги соответствующие

Answer 4

[Bowen]

HTML

<div class="inputs-wrap">
	<input type="radio"  class="inputs-wrap__radio inputs-wrap__radio--1">
	<input type="radio"  class="inputs-wrap__radio inputs-wrap__radio--2">
</div>
<div class="textareas-wrap">
	<textarea placeholder="Окно ввода для первой radio кнопки" class="textareas-wrap__field textareas-wrap__field--1"></textarea>
	<textarea placeholder="Окно ввода для второй radio кнопки" class="textareas-wrap__field textareas-wrap__field--2"></textarea>
</div>

CSS

.textareas-wrap__field--1 {
	display: none;
}

jQuery

$('.inputs-wrap__radio').on('change', function() {
        var i = $(this).index();
	$('.textareas-wrap__field').eq(i).toggle();
});

P.S. Все должно работать, если конечно я что то не перепутал.