Давно ничего не писал, но обещания надо выполнять, так что я начинаю плотно заниматься блогом и постоянно писать что то новое. Буквально вчера я сменил дизайн блога и чуть позже он будет доработан в моих целях, ну а сегодня я вам расскажу как красить checkbox’ы. Добро пожаловать под кат!
ВНИМАНИЕ.
Содержимое данной статьи морально устарело но сохранено для академических целей.
Итак, целью было украсить checkbox’ы так что бы с ними было приятно работать и они были интуитивны. Как всегда выражаю благодарности AlecPac’у за помощь в написании js.
Так же среди требований возможность использовать несколько разных checkbox рядом но в разном оформлении.
Итак, html + js!
<!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" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.check_f {
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
var on_prefix = "chekbox-on";
var off_prefix = "chekbox-off";
$(document).ready(function()
{
$(".check").click(function(){
var index = $(".check").index(this);
var imgsrc=$(this).attr('src');
if ($(".check_f").eq(index).attr('checked')) {
$(this).attr('src',imgsrc.replace(on_prefix,off_prefix));
$(".check_f").eq(index).removeAttr("checked");
} else {
$(this).attr('src',imgsrc.replace(off_prefix,on_prefix));
$(".check_f").eq(index).attr("checked","true");
}
});
});
</script>
</head>
<body>
<form action="" method="post" class="test_checkbox">
<img class="check" src="images/2_chekbox-off.png"><input type="checkbox" class="check_f" /><br />
<img class="check" src="images/1_chekbox-off.png"><input type="checkbox" class="check_f" /><br />
<img class="check" src="images/1_chekbox-off.png"><input type="checkbox" class="check_f" /><br />
<img class="check" src="images/2_chekbox-off.png"><input type="checkbox" class="check_f" />
</form>
</body>
</html>Для работы кода нужно всего лишь перед нужным checkbox’ом вставить картинку с классом check и поставить у input класс check_f.
в стилях нужно прописать
.check_f {
display:none;
}что бы скрыть сам checbox. Что бы курсор реагировал на картинку можно добавить
.check {
cursor:pointer;
}Получится очень удобно.
Добавить комментарий