Форум

Sanek · #1 (**permalink**) 01.03.2013, 17:14

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

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

zilker · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 01.03.2013, 18:18

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

zilker · #6 (**permalink**) 01.03.2013, 18:45

Да, как-то я промахнулся)

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

Deff · #7 (**permalink**) 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 · #8 (**permalink**) 02.03.2013, 08:24

zilker,

Это:

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

урезается до:

chbox.checked = !chbox.checked;

Форум

Справочник

Discord чат

Курсы javascript