Чекбоксы и их события
Всем добрый вечер. :)
Посмотрите код. Нужно, чтобы работало так - установка и снятие галочек происходило и при нажатии на квадратик, и при нажатии на слово, и чтобы при этом слово окрашивалось в красный и белый цвет соответственно. Проблема 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>
|
<!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>
|
или даже так
$(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");
});
});
|
Спасибо.
Я проанализировал ваш код (первый) и понял как он работает. Но так и не пойму - почему не работает мой. :-? |
Проблема 1
смею предположить что ie был 6-ой скорей всего в нем клик по label`у не связывается с input`ом который внутри Проблема 2 изначально неправильный подход реализации задачи используя focus элемент формы может получить фокус и не при клике (при проходе tab`ом) также событие focus не сработает если элемент уже в фокусе а при клике на текст у input`а всегда теряется фокус и тут же он снова его получает также надо учитывать что происходит вперед click или focus и при совершении клика в обработке события focus галочка уже проставлена или еще нет "...просто если обрабатывать события через click, то галочки почему-то не ставятся!" лучше надо было разбираться с click`ом чем создавать обработчик focus и разбираться в нем |
| Часовой пояс GMT +3, время: 00:28. |