Украшаем checkbox средствами Jquery

Июль 18th, 2011 Рубрики: JavaScript, Вкусняшки coubertin.cz www.colvillewoodworking.com

Давно ничего не писал, но обещания надо выполнять, так что я начинаю плотно заниматься блогом и постоянно писать что то новое. Буквально вчера я сменил дизайн блога и чуть позже он будет доработан в моих целях, ну а сегодня я вам расскажу как красить checkbox’ы. Добро пожаловать под кат!


Итак, целью было украсить checkbox’ы так что бы с ними было приятно работать и они были интуитивны. Как всегда выражаю благодарности AlecPac’у за помощь в написании js.

Так же среди требований возможность использовать несколько разных checkbox рядом но в разном оформлении.

Итак, html + js!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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.

в стилях нужно прописать

1
2
3
  .check_f {
    display:none;
  }

что бы скрыть сам checbox. Что бы курсор реагировал на картинку можно добавить

1
2
3
  .check {
    cursor:pointer;
  }

Получится очень удобно.

Скачать архив с исходником

Похожие записи:

  1. Twitter на вашем сайте
  2. Cufon, или 100500 шрифтов на вашем сайте
  3. Использование разных стилей для разных разрешений
  4. PNG и Internet Explorer или фиксим PNG в IE
  5. Подсветка кода в textarea
Теги: , ,
Оставить комментарий | Trackback

6 комментариев к “Украшаем checkbox средствами Jquery”

  1. clickgetinfo
    Август 15th, 2011 at 22:15
    1

    Nice code. thanks for writing this code.

    [Ответить]

  2. kopylovartyom
    Январь 10th, 2012 at 15:17
    2

    Спасибо. Очень помог.

    [Ответить]

  3. kopylovartyom
    Январь 10th, 2012 at 17:41
    3

    кстати, в моем случае нужно было чтобы все чекбоксы были сразу чекнутые. скрипт тогда работает после 2ух кликов. если бы он проверял значение и сразу заменял, цены бы небыло бы этому скрипту….

    [Ответить]

    ZekMan Reply:
    Январь 10th, 2012 at 19:04

    А когда один чекнутый — работает? Просто в какой то момент скрипт модернизировался, т.к. изначально не поддерживал checked, возможно это старая версия. Статус Checked по какому стандарту ставили? HTML, XHTML?

    [Ответить]

  4. Мария
    Сентябрь 6th, 2012 at 21:39
    4

    А как вам такое применение — http://lecaw.ru/index.php/categories/css/item/287-css-target-dlia-off-screen-dizaina

    [Ответить]

    ZekMan Reply:
    Сентябрь 6th, 2012 at 22:04

    По моему перебор

    [Ответить]

Написать комментарий