Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.03.2013, 16:14
Новичок на форуме
Отправить личное сообщение для Sanek Посмотреть профиль Найти все сообщения от Sanek
 
Регистрация: 01.03.2013
Сообщений: 1

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

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

Последний раз редактировалось Sanek, 01.03.2013 в 16:34.
Ответить с цитированием
  #2 (permalink)  
Старый 01.03.2013, 16:47
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

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);
Ответить с цитированием
  #3 (permalink)  
Старый 01.03.2013, 16:58
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 337

<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 не работает :-(
Ответить с цитированием
  #4 (permalink)  
Старый 01.03.2013, 17:11
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Не работает, потому что 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');
    }
});
Ответить с цитированием
  #5 (permalink)  
Старый 01.03.2013, 17:18
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 337

zilker,
Когда я говорил, что в IE не работает, имел ввиду свой вариант. Не работает картинка внутри тэга label, текст работает.
Ответить с цитированием
  #6 (permalink)  
Старый 01.03.2013, 17:45
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

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

По поводу картинки с лейблом да, это баг ишака.
Ответить с цитированием
  #7 (permalink)  
Старый 02.03.2013, 01:22
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!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>

Последний раз редактировалось Deff, 02.03.2013 в 02:07.
Ответить с цитированием
  #8 (permalink)  
Старый 02.03.2013, 07:24
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

zilker,

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

урезается до:
chbox.checked = !chbox.checked;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ротация картинок и возможность перехода по клику WhizArt Элементы интерфейса 0 07.02.2013 00:08
Свой чекбокс на скрипте Олег123 Элементы интерфейса 5 06.11.2012 16:19
Задать атрибут readonly по клику на чекбокс и назад PashPP Общие вопросы Javascript 16 27.07.2012 17:03
Меню, выпадающее и сворачивающееся не по hover а по клику adelante jQuery 1 14.01.2011 04:17
Текстовый чекбокс seedpeer Элементы интерфейса 1 29.11.2008 21:04