Javascript.RU

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

Чекбоксы и их события
Всем добрый вечер.
Посмотрите код. Нужно, чтобы работало так - установка и снятие галочек происходило и при нажатии на квадратик, и при нажатии на слово, и чтобы при этом слово окрашивалось в красный и белый цвет соответственно.

Проблема 1 - в IE (в Опере норм работает)
При нажатии на слово ничего не происходит (ни цвет не изменяется, ни галочки не ставятся).
Проблема 1 - и в Опере, и IE
При установке/снятии галочек при нажатии на квадартики цвет слова не изменяется.

Возможно, вы спросите зачем через focus - просто если обрабатывать события через click, то галочки почему-то не ставятся!

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:checked").next("span").addClass("box");
    $("input").focus(function(){
		$(this).next("span").addClass("box")
		$("input:not(:checked)").next("span").removeClass("box");
		return false;
    }); 
});
</script>
<style>
.box {
background:red;
}
</style>
</head>
<body>
<label><input type=checkbox value="yes" /><span>Иванов</span></label><br>
<label><input type=checkbox value="yes" CHECKED="true" /><span>Петров</span></label><br>
<label><input type=checkbox value="yes" /><span>Сидоров</span></label><br>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2009, 10:14
jsch
 
Сообщений: n/a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	$("span input").bind("click", function(){
		$(this).parent().find("label").toggleClass("box");
	}).filter("input:checked").parent().find("label").addClass("box");
});
</script>
<style type="text/css">
.box{
	background: red;
}
</style>
</head>
<body>
	<span><input id="checkbox1" type="checkbox" name="checkbox1" value="yes" /><label for="checkbox1">Иванов</label></span><br />
	<span><input id="checkbox2" type="checkbox" name="checkbox2" value="yes" checked="checked" /><label for="checkbox2">Петров</label></span><br />
	<span><input id="checkbox3" type="checkbox" name="checkbox3" value="yes" /><label for="checkbox3">Сидоров</label></span><br />
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2009, 10:24
jsch
 
Сообщений: n/a

или даже так
$(function(){
	$("input[type='checkbox']").bind("click", function(){
		$("label[for='"+$(this).attr("id")+"']").toggleClass("box");
	}).filter("input:checked").each(function(){
		$("label[for='"+$(this).attr("id")+"']").addClass("box");
	});
});
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2009, 13:29
Ups-upss
 
Сообщений: n/a

Спасибо.
Я проанализировал ваш код (первый) и понял как он работает. Но так и не пойму - почему не работает мой.
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2009, 14:23
jsch
 
Сообщений: n/a

Проблема 1
смею предположить что ie был 6-ой
скорей всего в нем клик по label`у не связывается с input`ом который внутри

Проблема 2
изначально неправильный подход реализации задачи используя focus
элемент формы может получить фокус и не при клике (при проходе tab`ом)
также событие focus не сработает если элемент уже в фокусе
а при клике на текст у input`а всегда теряется фокус и тут же он снова его получает
также надо учитывать что происходит вперед click или focus
и при совершении клика в обработке события focus галочка уже проставлена или еще нет

"...просто если обрабатывать события через click, то галочки почему-то не ставятся!"
лучше надо было разбираться с click`ом чем создавать обработчик focus и разбираться в нем
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не могу открыжить все чекбоксы нажатием одного nenastiy Events/DOM/Window 11 23.05.2010 17:50
События Jquery и не только Tohin Events/DOM/Window 3 21.08.2009 14:57
Как заставить this в обработчике события указывать на объект? Dmitryk Events/DOM/Window 3 16.03.2009 08:45
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47
Явный вызов процедуры обработки события. supchik Общие вопросы Javascript 18 27.01.2009 13:16