Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.03.2017, 11:10
Аватар для Fanis V
Новичок на форуме
Отправить личное сообщение для Fanis V Посмотреть профиль Найти все сообщения от Fanis V
 
Регистрация: 10.03.2017
Сообщений: 5

1 значения chexbox 1 изображение
Здравствуйте. Нужна помощь. Подскажите пожалуйста как сделать так чтобы при клике на checkbox менялась картинка. При этом у меня 7 чекбоксов и 7картинок. При выборе одного чекбокса появляется картинка, с других чекбоксов снимается галочка и исчезают картинки прикрепленные к ним.
Пока у меня такой код:
<input autocomplete="off" type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");'/> Лестница 1
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb2' onchange = 'showOrHide("cb2", "cat2");' /> Лестница 2
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb3' onchange = 'showOrHide("cb3", "cat3");' /> Лестница 3
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb4' onchange = 'showOrHide("cb4", "cat4");' /> Лестница 4
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb5' onchange = 'showOrHide("cb5", "cat5");' /> Лестница 5
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb6' onchange = 'showOrHide("cb6", "cat6");' /> Лестница 6
<br />
<input autocomplete="off" type = 'checkbox' id = 'cb7' onchange = 'showOrHide("cb7", "cat7");' /> Лестница 7

function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }


Сейчас галочки можно снимать только повторным нажатием. Если не снимать картинки перекрываются. Я на форуме нашел скрипт как сделать чтоб можно было выбирать только один чекбокс. Работает. Как бы объединить эти два скрита

var handler = function ( event ){
  event = event || window.event;
  var target = event.target || event.srcElement;
  if ( target.nodeType == 1 && target.nodeName.toLowerCase == "input" && target.type == "checkbox" && target.checked ) {
    var inputs = document.getElementsByTagName("input");
    for ( var i = 0; inputs[i]; i++ ) {
      if ( inputs[i].type="checkbox" && inputs != target ) {
        inputs[i].checked = false;
      }
    }
  }
}
if (document.body.addEventListener){
  document.body.addEventListener('click', handler, false); 
} else if (document.body.attachEvent){
  document.body.attachEvent('onclick', handler);
}

Последний раз редактировалось Fanis V, 10.03.2017 в 11:39.
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2017, 11:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Fanis V,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2017, 11:40
Аватар для Fanis V
Новичок на форуме
Отправить личное сообщение для Fanis V Посмотреть профиль Найти все сообщения от Fanis V
 
Регистрация: 10.03.2017
Сообщений: 5

Спасибо, отредактировал.
Ответить с цитированием
  #4 (permalink)  
Старый 10.03.2017, 11:41
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

Попробуйте добавить строчки в showOrHide (перед 4-й строчкой)
var cats = document.querySelectorAll("[id^='cat']");
	[].forEach.call(cats, function(el){
		el.style.display = "none";
	});

Сообщение от Fanis V Посмотреть сообщение
Я на форуме нашел скрипт как сделать чтоб можно было выбирать только один чекбокс. Работает.
Странно, я нашла 3 ошибки в if'ах в handler
Ответить с цитированием
  #5 (permalink)  
Старый 10.03.2017, 11:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Fanis V,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #pic{
    box-sizing:border-box;
    border: 1px solid #0000FF;
    height:200px;
    width:300px;
    margin: 0;  padding: 0;
    background-image: url(http://vremena-goda.su/uploads/posts/2015-12/thumbs/1450868041_begemot-foto-i-opisanie.jpg);
    background-repeat:  no-repeat;
    background-size:   cover;
  }
  #cb1:checked ~ #pic{
    background-image: url(http://vremena-goda.su/uploads/posts/2015-12/thumbs/1450868041_begemot-foto-i-opisanie.jpg);
  }
  #cb2:checked ~ #pic{
    background-image: url(http://zhivotnue.ru/image/dicie_zhivotnue/slonovue/4.jpg);
  }
  #cb3:checked ~ #pic{
    background-image: url(https://dncache-mauganscorp.netdna-ssl.com/thumbseg/2150/2150535-bigthumbnail.jpg);
  }
  </style>


</head>

<body>
<input checked="checked" autocomplete="off" type ="radio" id = "cb1" name="show"  >
<input autocomplete="off" type ="radio" id = "cb2" name="show">
<input autocomplete="off" type ="radio" id = "cb3" name="show">
<div id="pic"></div>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 10.03.2017, 12:03
Аватар для Fanis V
Новичок на форуме
Отправить личное сообщение для Fanis V Посмотреть профиль Найти все сообщения от Fanis V
 
Регистрация: 10.03.2017
Сообщений: 5

Спасибо большое. Быстро и оперативно ответили, все работает!
Ответить с цитированием
  #7 (permalink)  
Старый 10.03.2017, 12:06
Аватар для Fanis V
Новичок на форуме
Отправить личное сообщение для Fanis V Посмотреть профиль Найти все сообщения от Fanis V
 
Регистрация: 10.03.2017
Сообщений: 5

Через радио. Интересно, надо взять на заметку) Спасибо рони!
Ответить с цитированием
  #8 (permalink)  
Старый 10.03.2017, 12:41
Аватар для Fanis V
Новичок на форуме
Отправить личное сообщение для Fanis V Посмотреть профиль Найти все сообщения от Fanis V
 
Регистрация: 10.03.2017
Сообщений: 5

Все работает, но единственная проблема, если кликнуть на пустом месте или еще где-то в браузере. Картинка пропадает.
var handler = function ( event ){
  event = event || window.event;
  var target = event.target || event.srcElement;
var cats = document.querySelectorAll("[id^='cat']");
	[].forEach.call(cats, function(el){
		el.style.display = "none";
	});

  if ( target.nodeType == 1 && target.nodeName.toLowerCase == "input" && target.type == "checkbox" && target.checked ) {
    var inputs = document.getElementsByTagName("input");
    for ( var i = 0; inputs[i]; i++ ) {
      if ( inputs[i].type="checkbox" && inputs != target ) {
        inputs[i].checked = false;
      }
    }
  }
};
if (document.body.addEventListener){
  document.body.addEventListener('click', handler, false); 
} else if (document.body.attachEvent){
  document.body.attachEvent('onclick', handler);
}

Последний раз редактировалось Fanis V, 11.03.2017 в 11:54.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему возвращает значения RGB каналов? Black_Star jQuery 14 06.02.2017 03:49
Input type="time" + JS +Safari (iPhone) dpts Opera, Safari и др. 0 21.09.2016 07:24
Отобразить изображение в зависимости от значения переменной snake Javascript под браузер 4 05.12.2013 13:42
JS загружает изображение всегда с локального кэша - почему? buhpro Общие вопросы Javascript 4 02.10.2013 20:01
Выбор только 1 значения chexbox Amateur Internet Explorer 9 21.06.2011 12:19