Радиобатоны и текстовые поля
Добрый вечер! подскажите как сделать следующее:
есть 2 радио батона, и мне надо нажимая на первый радиобатон, разворачивать форму с полями, при этом нажав на второй радиобатон, содержимое первого радиобатона сворачивается и разворачивается содержимое второго батона, облазил инет, не получилось найти подобное, надеюсь на JS сообщество :yes: |
Цитата:
|
знать бы что делать, пока только 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>
|
Цитата:
Правда у тебя радиобаттоны с непонятным name... Цитата:
<!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>
|
а так чтоб поле первого радиобатона было видно, а при нажатии на второй радиобатон скрывать перовое поле и показывать второе, и т.д.
|
Ничего не понял... :no:
|
как у вас в примере, только радиобатон активный и поле видно, при клике на второй радиобатон, поле первого прячется и активен только второй радиобатон с полем, такой себе переключатель показа полей :-?
|
Картинкой челе покажи...
|
поганый я художник, суть в том, что все как сейчас у вас, но вот только при загрузке первый радиобатон активный и поля показаны по умолчанию, а дальше как вы сделали
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:03. |