Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрыть/показать блок в зависимости от radio (https://javascript.ru/forum/dom-window/37822-skryt-pokazat-blok-v-zavisimosti-ot-radio.html)

MBmusic 08.05.2013 16:36

Скрыть/показать блок в зависимости от radio
 
в общем есть два радио бокса, по умолчанию ничего не выбрано......когда пользователь выбирает первый радио, появляется под ним инфа в таблице, ну типо блок появляеться.......выбирает пользователь второй радио, первый блок первого радио пропадает и вместо него появляеться второй радио...

вот мой код:
<script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

<tr>
<td width="100">Користувач</td>
<td><input type = "radio" id = "cb1" onclick = "showOrHide('cb1', 'cat1');" name="student" value="0"></td>
<td><input type = "radio" id = "cb2" onclick = "showOrHide('cb2', 'cat2');" name="student" value="1"></td>
</tr>


</tr>
<tr id = 'cat1' style = 'display: none;'>
<td>Первый</td>
</tr>
<tr id = 'cat2' style = 'display: none;'>
<td>Второй</td>
</tr>


работает нормально, НО если у нас выбран первый радио, и мы выбираем второй то блок первого радио не пропадает......тоесть у нас при выборе первого радио появляеться блок, когда мы выбираем второй радио у нас под первым появляется второй блок, а должно вместо первого появлятся......в общем вот как это сделать?

skrudjmakdak 08.05.2013 16:39

http://javascript.ru/forum/249461-post12.html

что то подобное я писал. только без радио

MBmusic 08.05.2013 16:48

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

skrudjmakdak 08.05.2013 16:58

>>>что то не совсем понятно как у вас там написано)
всем хочется всего и сразу.. а вы вот возьмите и разберите))


ну скорей всего событие не onclick, а onchange..

<td><input type = "radio" id = "cb1" onclick = "showOrHide('cat1', 'cat2');" name="student" value="0"></td>
<td><input type = "radio" id = "cb2" onclick = "showOrHide('cat2', 'cat1');" name="student" value="1"></td>



...
<script type="text/javascript">
  function showOrHide(cat1, cat2) {
    cat1 = document.getElementById(cat1);
    cat2 = document.getElementById(cat2);

    cat1.style.display = "block";
    cat2.style.display = "none";
  }
</script>

...
п.с. на работоспособность не проверял, должно быть как то так...

MBmusic 08.05.2013 17:03

поменял onclick на onchange и изменил вышенаписаный js код, не работает......с онкликом тоже не работает(

skrudjmakdak 08.05.2013 17:05

ммм. ну кидайте код, что вы сделали... гляну

skrudjmakdak 08.05.2013 17:05

желательно весь

MBmusic 08.05.2013 17:08

ну сделал то что вы написали выше)

<script type="text/javascript">
  function showOrHide(cat1, cat2) {
    cat1 = document.getElementById(cat1);
    cat2 = document.getElementById(cat2);

    cat1.style.display = "block";
    cat2.style.display = "none";
  }
</script>


<tr>
            <td width="100">Користувач</td>
            <td><input type = "radio" id = "cb1" onchange = "showOrHide('cb1', 'cat1');" name="student" value="0"></td>
			<td><input type = "radio" id = "cb2" onchange = "showOrHide('cb2', 'cat2');" name="student" value="1"></td>
            </tr>
			<tr id = 'cat1' style = 'display: none;'>
				<td>Первый</td>
			</tr>
			<tr id = 'cat2' style = 'display: none;'>
				<td>Второй</td>
			</tr>

MBmusic 08.05.2013 17:10

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

<script type="text/javascript">
  function showOrHide(cat1, cat2) {
    cat1 = document.getElementById(cat1);
    cat2 = document.getElementById(cat2);

    cat1.style.display = "block";
    cat2.style.display = "none";
  }
</script>
<div class="shablon_name_title">
<img src="images/icons/adduser.png">
<font>Додати користувача</font>
</div>
<div class="shablon_content">
		 <?=@$this->error?>
		 <form action="" method="post">  
            <table id="tabs">
            <tr>
            <td width="100">Введіть логін</td>
            <td><input name="name_add_user" type="text"></td> 
            </tr>
            <tr>
            <td width="100">Введіть пароль</td>
            <td><input name="pass_add_user" type="password"></td>
            </tr>

			<tr>
            <td width="100">Користувач</td>
            <td><input type = "radio" id = "cb1" onchange = "showOrHide('cb1', 'cat1');" name="student" value="0"></td>
			<td><input type = "radio" id = "cb2" onchange = "showOrHide('cb2', 'cat2');" name="student" value="1"></td>
            </tr>
			<tr id = 'cat1' style = 'display: none;'>
				<td>Первый</td>
			</tr>
			<tr id = 'cat2' style = 'display: none;'>
				<td>Второй</td>
			</tr>
            <tr>
            <td></td>
            <td><input class="button_log_admin" name="submit_add_user" type="submit" value="Додати"></td>  
            </tr>
            </table>
         </form> 
</div>

skrudjmakdak 08.05.2013 17:17

смотрите внимательней что у вас написано, а что я писал!
onchange = "showOrHide('cb1', 'cat1');" - это у вас
onchange можете оставить, клик там даром не нужен


Часовой пояс GMT +3, время: 17:59.