Показать сообщение отдельно
  #1 (permalink)  
Старый 10.03.2017, 12: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 в 12:39.
Ответить с цитированием