Javascript-форум - Переключение блоков.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Переключение блоков. (https://javascript.ru/forum/dom-window/39489-pereklyuchenie-blokov.html)

Переключение блоков.

Добрый день, помогите пожалуйста, как попроще реализовать переключение блоков с помощью радиокнопки? То есть, при выборе кнопки "1" виден один блок, при клике на вторую-второй(первый скрывается). Так же очень нужна помощь в следующем: в выпадающем меню выбираются числа (1-4). Какое число выбрано, столько одинаковых блоков видно. Очень надеюсь на вашу помощь, и заранее спасибо:)

Цитата:

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

Очень надеюсь на вашу помощь

От тебя ждем тестовые примеры...

Вот примеры :)

Цитата:

Сообщение от ksa (Сообщение 259597)

От тебя ждем тестовые примеры...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p><input type="radio" name="blocks" value="#1" checked="checked" />
1<br />
<input type="radio" name="blocks" value="#2" />
2</p>

  <div id="1" class="blocks"> <fieldset>
 <form name="form2" method="post" action="">
            <label>
              <textarea name="p6" id="p6" cols="57" rows="1"></textarea>
            </label>
          </form>
          </fieldset>
</div>

<div id="2" class="blocks"> <fieldset>
<table width="313" border="0">
      <tr>
        <td width="180"><ul>
          <li>ааа</li>
        </ul></td>
        <td width="77"><input type="text" name="p5" id="p5" size="5"
        ></td>
      </tr>
      <tr>
        <td><ul>
          <li>ббб</li>
        </ul></td>
        <td><input type="text" name="p7" id="p7" size="5"
        ></td>
      </tr>
      <tr>
        <td><ul>
          <li>ввв</li>
        </ul></td>
        <td><input type="text" name="p8" id="p8" size="5"
        ></td>
      </tr>
    </table> </fieldset>
</div>

Количество:
  <select name="blanks" id="blanks">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select> 

 <div>
<table width="957" border="0">
         <tr>
    <td width="158">ФИО</td>
    <td width="789"><input name="12" type="text" value="" size="35">
      <input name="13" type="text" value="" size="40">
      <input name="1" type="text" value="" size="40"></td>
  </tr>
  <tr>
    <td><p>Удостоверение личности</p></td>
    <td><input name="14" type="text" value="" size="10">
      <input name="15" type="text" value="" size="20"></td>
  </tr>
  
</table> </div>

</body>
</html>

</body>

Жуть какая-то! :blink:
И что с этим делать?

И правда жуть. Так лучше. Хотелось бы что бы это работало ^_^

!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p-10</title>
</head>
<body>
<p><input type="radio" name="blocks" value="#1" checked="checked" />
1<br />
<input type="radio" name="blocks" value="#2" />
2</p>

  <div id="1" class="blocks"> <fieldset>
 <form name="form2" method="post" action="">
            <label>
              <textarea name="p6" id="p6" cols="57" rows="1"></textarea>
            </label>
          </form>
          </fieldset>
</div>

<div id="2" class="blocks"> <fieldset>
<table width="313" border="0">
      <tr>
        <td width="180"><ul>
          <li>ааа</li>
        </ul></td>
        <td width="77"><input type="text" name="p5" id="p5" size="5"
        ></td>
      </tr>
      <tr>
        <td><ul>
          <li>ббб</li>
        </ul></td>
        <td><input type="text" name="p7" id="p7" size="5"
        ></td>
      </tr>
      <tr>
        <td><ul>
          <li>ввв</li>
        </ul></td>
        <td><input type="text" name="p8" id="p8" size="5"
        ></td>
      </tr>
    </table> </fieldset>
</div>

Количество:
  <select name="blanks" id="blanks">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select> 

 <div>
<table width="957" border="0">
         <tr>
    <td width="158">ФИО</td>
    <td width="789"><input name="12" type="text" value="" size="35">
      <input name="13" type="text" value="" size="40">
      <input name="1" type="text" value="" size="40"></td>
  </tr>
  <tr>
    <td><p>Удостоверение личности</p></td>
    <td><input name="14" type="text" value="" size="10">
      <input name="15" type="text" value="" size="20"></td>
  </tr>
  
</table> </div>

</body>
</html>

</body>
</html>

Цитата:

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

Хотелось бы что бы это работало

Что именно "работало"?

что бы с помощью радиокнопки переключались блоки

Цитата:

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

что бы с помощью радиокнопки переключались блоки

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

<!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">
#b1 {
	border: 1px solid red;
}
#b2 {
	display: none;
	border: 1px solid green;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('.switch label').click(function(){
		$('.blocks').hide();
		$($(this).find('input').val()).show();
	});
});
</script>
</head>
<body>
<p class='switch'>
	<label>
		<input type="radio" name="blocks" value="#b1" checked="checked" />
		1
	</label>
	<label>
		<input type="radio" name="blocks" value="#b2" />
		2
	</label>
</p>
<div id="b1" class="blocks"> 
	<form name="form2" method="post" action="">
		<fieldset>
			<label>
			<textarea name="p6" id="p6" cols="57" rows="1"></textarea>
			</label>
		</fieldset>
	</form>
</div>
<div id="b2" class="blocks"> 
	<fieldset>
		<table width="313" border="0">
			<tr>
				<td width="180">
					<ul>
						<li>ааа</li>
					</ul>
				</td>
				<td width="77"><input type="text" name="p5" id="p5" size="5"></td>
			</tr>
			<tr>
				<td>
					<ul>
						<li>ббб</li>
					</ul>
				</td>
				<td><input type="text" name="p7" id="p7" size="5"></td>
			</tr>
			<tr>
				<td>
					<ul>
						<li>ввв</li>
					</ul>
				</td>
				<td><input type="text" name="p8" id="p8" size="5"></td>
			</tr>
		</table> 
	</fieldset>
</div>
<label>
Количество:
  <select name="blanks" id="blanks">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select> 
</label>
<div>
	<table width="957" border="0">
		<tr>
			<td width="158">ФИО</td>
			<td width="789"><input name="12" type="text" value="" size="35">
				<input name="13" type="text" value="" size="40">
				<input name="1" type="text" value="" size="40">
			</td>
		</tr>
		<tr>
			<td><p>Удостоверение личности</p></td>
			<td>
				<input name="14" type="text" value="" size="10">
				<input name="15" type="text" value="" size="20">
			</td>
		</tr>
	</table> 
</div>
</body>
</html>