Скрыть/показать блок в зависимости от 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>
работает нормально, НО если у нас выбран первый радио, и мы выбираем второй то блок первого радио не пропадает......тоесть у нас при выборе первого радио появляеться блок, когда мы выбираем второй радио у нас под первым появляется второй блок, а должно вместо первого появлятся......в общем вот как это сделать? |
|
что то не совсем понятно как у вас там написано) я просто нуб в js хотелось что бы вы конкретно в моей проблеме указали где ошибка и как исправить......спасибо
|
>>>что то не совсем понятно как у вас там написано)
всем хочется всего и сразу.. а вы вот возьмите и разберите)) ну скорей всего событие не 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>
... п.с. на работоспособность не проверял, должно быть как то так... |
поменял onclick на onchange и изменил вышенаписаный js код, не работает......с онкликом тоже не работает(
|
ммм. ну кидайте код, что вы сделали... гляну
|
желательно весь
|
ну сделал то что вы написали выше)
<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>
|
вот весь код, это у меня шаблон который подключаеться к главному...
<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>
|
смотрите внимательней что у вас написано, а что я писал!
onchange = "showOrHide('cb1', 'cat1');" - это у вас onchange можете оставить, клик там даром не нужен |
| Часовой пояс GMT +3, время: 10:53. |