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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Спасибо, отредактировал.
|
Попробуйте добавить строчки в showOrHide (перед 4-й строчкой)
var cats = document.querySelectorAll("[id^='cat']");
[].forEach.call(cats, function(el){
el.style.display = "none";
});
Цитата:
|
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>
|
Спасибо большое. Быстро и оперативно ответили, все работает!
|
Через радио. Интересно, надо взять на заметку) Спасибо рони!
|
Все работает, но единственная проблема, если кликнуть на пустом месте или еще где-то в браузере. Картинка пропадает.
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);
}
|
| Часовой пояс GMT +3, время: 02:36. |