Форум

Alfer · #1 (**permalink**) 14.11.2013, 03:16

Добрый вечер! подскажите как сделать следующее:

есть 2 радио батона, и мне надо нажимая на первый радиобатон, разворачивать форму с полями, при этом нажав на второй радиобатон, содержимое первого радиобатона сворачивается и разворачивается содержимое второго батона, облазил инет, не получилось найти подобное, надеюсь на JS сообщество

ksa · #2 (**permalink**) 14.11.2013, 08:58

Сообщение от Alfer

облазил инет, не получилось найти подобное

А тестовый пример кто за тебя делать будет?

Alfer · #3 (**permalink**) 14.11.2013, 12:28

знать бы что делать, пока только html кодом могу обрадовать

<div class="row">
              <span class="label">Radio1 </span>
           
             
              <div class="frame">
                  <div class="radio-area">
                      <input type="radio" required name="radio1" value="1" id="o1">
                      <label for="o1">Radio 1<em>*</em></label>
                  </div>
                  <div class="data">
                    <input type="text" required id="o1" class="text1" name="field1">
                    <input type="text" required id="o2" class="text2" name="field2">
                   
                  </div>
              </div>
             
              <div class="frame">
                  <div class="radio-area">
                      <input type="radio" required name="radio2" value="1" id="o2">
                      <label for="o2">Radio 2<em>*</em></label>
                  </div>
                  <div class="data">
                    <input type="text" required id="o11" class="text1" name="field11">
                    <input type="text" required id="o21" class="text2" name="field21">
                    <input type="text" required id="o31" class="text3" name="field31">
                  </div>
              </div>
             
          </div>

ksa · #4 (**permalink**) 14.11.2013, 13:17

Сообщение от Alfer

пока только html кодом могу обрадовать

Он и нужен.

Правда у тебя радиобаттоны с непонятным name...

Сообщение от Alfer

нажимая на первый радиобатон, разворачивать форму с полями, при этом нажав на второй радиобатон, содержимое первого радиобатона сворачивается и разворачивается содержимое второго батона

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.data {
	display: none;
}
</style>
<script type="text/javascript">
$(function (){
	$('.radio-area > input').click(function () {
		$('.data').hide();
		$(this.parentNode).next().show();
	});
});
</script>
</head>
<body>
<div class="row">
	<span class="label">Radio1 </span>
	<div class="frame">
		<div class="radio-area">
			<input type="radio" required name="radio" value="1" id="o1">
			<label for="o1">Radio 1<em>*</em></label>
		</div>
		<div class="data">
			<input type="text" required id="o1" class="text1" name="field1">
			<input type="text" required id="o2" class="text2" name="field2">
		</div>
	</div>
	<div class="frame">
		<div class="radio-area">
			<input type="radio" required name="radio" value="1" id="o2">
			<label for="o2">Radio 2<em>*</em></label>
		</div>
		<div class="data">
			<input type="text" required id="o11" class="text1" name="field11">
			<input type="text" required id="o21" class="text2" name="field21">
			<input type="text" required id="o31" class="text3" name="field31">
		</div>
	</div>
</div>
</body>
</html>

Alfer · #5 (**permalink**) 14.11.2013, 14:16

а так чтоб поле первого радиобатона было видно, а при нажатии на второй радиобатон скрывать перовое поле и показывать второе, и т.д.

ksa · #6 (**permalink**) 14.11.2013, 14:46

Ничего не понял...

Alfer · #7 (**permalink**) 14.11.2013, 14:51

как у вас в примере, только радиобатон активный и поле видно, при клике на второй радиобатон, поле первого прячется и активен только второй радиобатон с полем, такой себе переключатель показа полей

ksa · #8 (**permalink**) 14.11.2013, 15:02

Картинкой челе покажи...

Alfer · #9 (**permalink**) 14.11.2013, 15:14

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

ksa · #10 (**permalink**) 14.11.2013, 15:28

Сообщение от Alfer

поганый я художник

У тебя есть мой тестовый пример - на нем покажи...

Форум

Справочник

Discord чат

Курсы javascript