Форум

Fanis V · #1 (**permalink**) 10.03.2017, 12:10

Здравствуйте. Нужна помощь. Подскажите пожалуйста как сделать так чтобы при клике на 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);
}

рони · #2 (**permalink**) 10.03.2017, 12:29

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Fanis V · #3 (**permalink**) 10.03.2017, 12:40

Спасибо, отредактировал.

Manyasha · #4 (**permalink**) 10.03.2017, 12:41

Попробуйте добавить строчки в 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, 12:55

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>

Fanis V · #6 (**permalink**) 10.03.2017, 13:03

Спасибо большое. Быстро и оперативно ответили, все работает!

Fanis V · #7 (**permalink**) 10.03.2017, 13:06

Через радио. Интересно, надо взять на заметку) Спасибо рони!

Fanis V · #8 (**permalink**) 10.03.2017, 13:41

Все работает, но единственная проблема, если кликнуть на пустом месте или еще где-то в браузере. Картинка пропадает.

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);
}

Форум

Справочник

Discord чат

Курсы javascript