checkbox показ/исчезновение изображения помогите студентке!!!
Всем здравствуйте!
У меня есть небольшая, даже глупая проблемка. Язык JS изучаю всего месяц, дают его нам исковеркано, поэтому кроме как здесь помощи искать негде. у меня есть задание: Возьмите несколько (не менее пяти) любых картинок (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все картинки в различных местах и возле каждой картинки был, изначально "включенный" чек-бокс. С помощью чек-боксов пользователь должен иметь возможность включать/выключать показ соответсвующих картинок. Т.е. немедленно по нажатии чек-бокса картинка должна исчезать (или появляться). Я написала код, но, увы сразу картинки не отображаются, а только при смене статуса checkbox. Как мне сделать так, чтобы при открытии страницы картинки показывались, а при смене статуса checkbox они исчезали? Вот код: <html> <head> <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> </head> <body> <table> <div> <tr><td> <input type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");' checked/> <br /> <div id = 'cat1' style = 'display: none;'><img src=1.jpg></div> <td> <input type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' checked/> <br /> <div id = 'cat2' style = 'display: none;'><img src=2.jpg></div> <td> <input type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' checked/> <br /> <div id = 'cat3' style = 'display: none;'><img src=3.jpg></div> <tr><td> <input type = 'checkbox' id = 'cb4' onchange = 'showOrHide("cb4", "cat4");' checked/> <br /> <div id = 'cat4' style = 'display: none;'><img src=4.jpg></div> <td> <input type = 'checkbox' id = 'cb5' onchange = 'showOrHide("cb5", "cat5");' checked/> <br /> <div id = 'cat5' style = 'display: none;'><img src=5.jpg></div> </div> </table> </body> </html> сразу скажу, за корявость можете ругать, так как пишу, как дает преподаватель. очень прошу помочь, так как я в ступоре. |
все, я разобралась! просто не нашла как тему удалить((((
|
|
:) вариант без js
<!DOCTYPE HTML>
<html>
<head>
<style>
:checked ~ div[id^=cat]{
display: none;
}
div[id^=cat] {
display:block
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" id="cb1" onchange="showOrHide(1);" checked/>
<br />
<div id="cat1">
<img src="http://javascript.ru/forum/images/smilies/smile.gif">
</div>
</td>
<td>
<input type="checkbox" id="cb2" onchange="showOrHide(2);" checked/>
<br />
<div id="cat2">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif">
</div>
</td>
<td>
<input type="checkbox" id="cb3" onchange="showOrHide(3);" checked/>
<br />
<div id="cat3">
<img src="http://javascript.ru/forum/images/smilies/stop.gif">
</div>
</td>
<td>
<input type="checkbox" id="cb4" onchange="showOrHide(4);" checked/>
<br />
<div id="cat4">
<img src="http://javascript.ru/forum/images/smilies/angry.gif">
</div>
</td>
<td>
<input type="checkbox" id="cb5" onchange="showOrHide(5);" checked/>
<br />
<div id="cat5">
<img src="http://javascript.ru/forum/images/smilies/no.gif">
</div>
</td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:37. |