Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2014, 19:31
Интересующийся
Отправить личное сообщение для vesnushka163 Посмотреть профиль Найти все сообщения от vesnushka163
 
Регистрация: 22.03.2014
Сообщений: 12

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>

сразу скажу, за корявость можете ругать, так как пишу, как дает преподаватель.

очень прошу помочь, так как я в ступоре.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2014, 19:38
Интересующийся
Отправить личное сообщение для vesnushka163 Посмотреть профиль Найти все сообщения от vesnushka163
 
Регистрация: 22.03.2014
Сообщений: 12

все, я разобралась! просто не нашла как тему удалить((((
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2014, 19:57
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

http://learn.javascript.ru/play/RfPhqc
http://learn.javascript.ru/play/dNy6Jb

Последний раз редактировалось Vlasenko Fedor, 29.03.2014 в 20:38.
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2014, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

вариант без 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с CHECKBOX NickPark Общие вопросы Javascript 1 11.06.2012 23:19
Помогите с checkbox Olka_Lelka jQuery 5 04.05.2012 15:50
ПОМОГИТЕ С CHECKBOX!!! rawuk Events/DOM/Window 7 31.01.2012 08:42
CHECKBOX Помогите пожалуйста.... savelikan Общие вопросы Javascript 2 14.10.2011 00:50
Помогите пожалуйста с обьяснением загрузки изображения на сервер. 0931454574 Серверные языки и технологии 3 11.05.2011 18:05