Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   По клику на картинке включать/выключать чекбокс (https://javascript.ru/forum/misc/36027-po-kliku-na-kartinke-vklyuchat-vyklyuchat-chekboks.html)

Sanek 01.03.2013 17:14
По клику на картинке включать/выключать чекбокс
 
Подскажите.
Как сделать, чтоб по клику на картинке включать/выключать чекбокс с нужным id?

..Или хотябы по клику на <table> или div

zilker 01.03.2013 17:47 
var img = document.getElementById('id_cartinki'),
    chbox = document.getElementById('id_chekboksa');
img.addEventListener('click', function(){
    if (chbox.getAttribute('checked') == 'checked') {
        chbox.removeAttribute('checked');
    } else {
        chbox.setAttribute('checked', 'checked');
    }
}, false);

rgl 01.03.2013 17:58 
<form>
<input type="checkbox" id="chb1">

<br>
Some text
<br>
Some more text
<br>

<label for="chb1">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</label>
</form>


В IE не работает :-(

zilker 01.03.2013 18:11
Не работает, потому что IE не поддерживает метод addEventListener.

var img = document.getElementById('id_cartinki'),
    chbox = document.getElementById('id_chekboksa'), addEvent;

if (document.addEventListener) {
    addEvent = function(elem, type, handler) {
        elem.addEventListener(type, handler, false)
    }
} else {
    addEvent = function(elem, type, handler) {
        elem.attachEvent("on" + type, handler)
    }
}

addEvent(img, 'click', function(){
    if (chbox.getAttribute('checked') == 'checked') {
        chbox.removeAttribute('checked');
    } else {
        chbox.setAttribute('checked', 'checked');
    }
});

rgl 01.03.2013 18:18
zilker,
Когда я говорил, что в IE не работает, имел ввиду свой вариант. Не работает картинка внутри тэга label, текст работает.

zilker 01.03.2013 18:45
Да, как-то я промахнулся)

По поводу картинки с лейблом да, это баг ишака.

Deff 02.03.2013 02:22 
<!DOCTYPE HTML>
<html>
<head>
<style>
label {
 display:inline-block;
 position:relative;
}
label div {
 position:absolute;
 z-index:10;
 border:1px solid blue;
 width:100%;
 height:100%;
 background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
</style>
</head>
<body>


<label for="chb1"><div></div>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</label>



<input type="checkbox" id="chb1">

  </body>
</html>

danik.js 02.03.2013 08:24
zilker,

Это:
if (chbox.getAttribute('checked') == 'checked') {
    chbox.removeAttribute('checked');
} else {
    chbox.setAttribute('checked', 'checked');
}

урезается до:
chbox.checked = !chbox.checked;


Часовой пояс GMT +3, время: 23:01.