Форум

Sintes · #1 (**permalink**) 25.12.2013, 21:59

Помогите реализовать такой нюанс. Есть список:

РадиоКнопка1
РадиоКнопка2
РадиоКнопка3
РадиоКнопка4

Необходимо, чтобы при выборе РадиоКнопки2 появился список из дополнительных РадиоКнопок, например:

РадиоКнопка1
РадиоКнопка2
- РадиоКнопка2а
- РадиоКнопка2б
- РадиоКнопка2в
- РадиоКнопка2г
РадиоКнопка3
РадиоКнопка4

Т.е. чтобы уже можно было выбирать вариант из дополнительных кнопок.

Sintes · #2 (**permalink**) 25.12.2013, 23:22

У меня нет своего подобного варианта, к сожалению. Только сам радио список. Поэтому и прошу Вашей помощи...
Хотя что-то подобное есть, только тут ссылки в списке, а мне хотелось бы оформить это в виде radio кнопок

Код:

<html>
<head>


<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block";
	}
}
window.onload=startList;
</script>

</head>
<body>
<div id="menu_body">
	<ul>
		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
			<ul id="sub_menu_1">
				<li><a href="#">Подпункт №1</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
			<ul id="sub_menu_2">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
			<ul id="sub_menu_3">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
			</ul>
		</li>
	</ul>
</div>


</body>
</html>

рони · #3 (**permalink**) 26.12.2013, 00:22

Sintes,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    display: none;
  }
  input:checked + div{
    display: block;
  }
  </style>
</head>

<body>

<input name="radio" type="radio" value="1">1
<input name="radio" type="radio" value="2">2
<div>
<input name="radio_sub2" type="radio" value="21">21
<input name="radio_sub2" type="radio" value="22">22
<input name="radio_sub2" type="radio" value="23">23
</div>
<input name="radio" type="radio" value="3">3
<div>
<input name="radio_sub3" type="radio" value="31">31
<input name="radio_sub3" type="radio" value="32">32
<input name="radio_sub3" type="radio" value="33">33
</div>


</body>

</html>

Sintes · #4 (**permalink**) 26.12.2013, 18:38

Cпасибо Вам большое!!

Форум

Справочник

Discord чат

Курсы javascript