Скрыть/показать блок в зависимости от 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, время: 13:20. |