Украшаем checkbox средствами Jquery
Давно ничего не писал, но обещания надо выполнять, так что я начинаю плотно заниматься блогом и постоянно писать что то новое. Буквально вчера я сменил дизайн блога и чуть позже он будет доработан в моих целях, ну а сегодня я вам расскажу как красить 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; } |
Получится очень удобно.
Nice code. thanks for writing this code.
[Ответить]
Спасибо. Очень помог.
[Ответить]
кстати, в моем случае нужно было чтобы все чекбоксы были сразу чекнутые. скрипт тогда работает после 2ух кликов. если бы он проверял значение и сразу заменял, цены бы небыло бы этому скрипту….
[Ответить]
ZekMan Reply:
Январь 10th, 2012 at 19:04
А когда один чекнутый — работает? Просто в какой то момент скрипт модернизировался, т.к. изначально не поддерживал checked, возможно это старая версия. Статус Checked по какому стандарту ставили? HTML, XHTML?
[Ответить]
А как вам такое применение — http://lecaw.ru/index.php/categories/css/item/287-css-target-dlia-off-screen-dizaina
[Ответить]
ZekMan Reply:
Сентябрь 6th, 2012 at 22:04
По моему перебор
[Ответить]