Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Красивые Checkbox и Radio переключатели

В этом уроке мы рассмотрим как с помощью jQuery превратить обычные Checkbox и Radio переключатели в графические. Данные элементы очень широко используются, но все они выглядят довольно однообразно и скучно. А как их изменить, сделать неповторимыми – об этом мы сейчас и поговорим.

Пример

В начале страницы между тегами <head></head> подключим фреймворк и допишим еще один скрипт:

<script type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
$(".RadioClass").change(function(){
if($(this).is(":checked")){
$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
$(this).next("label").addClass("RadioSelected");
}
});
});
</script>

Отлично, а теперь чтобы переключатели превратились в графические добавим немного стилей:

<style>
.CheckBoxClass,.RadioClass{
display: none;
}
.CheckBoxLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 150px;
display: block;
}
.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("Check.png") no-repeat;
}
.RadioLabelClass{
background: url("RUnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 70px;
display: block;
float: left;
}
.RadioSelected{
background: url("RCheck.png") no-repeat;
}
</style>

Ну вот, можно создать и саму форму с переключателями и придать им соответствующие стили:

<form action="#" method="post">
<input
id="CheckBox1" type="checkbox" class="CheckBoxClass">
<label
id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>
<input
id="CheckBox2" type="checkbox" class="CheckBoxClass">
<label
id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>

<input
id="Radio1" type="radio" class="RadioClass" name="group1">
<label
id="Label1" for="Radio1" class="RadioLabelClass">Radio 1</label>
<input
id="Radio2" type="radio" class="RadioClass" name="group1">
<label
id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input
id="Radio3" type="radio" class="RadioClass" name="group1">
<label
id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>
<br><br><br>
<input
type="submit" value="Отправить">
</form>

В принципе и все, теперь наши переключатели приобрели довольно симпатичный вид.

Автор: Евгений Бочкарев Урок добавлен: 19 Августа 2009 в 21:55 Просмотров: 19434

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (1)

#2 Евгений 29-03-2011 в 09:08
Было бы хорошо, если стразу стили с хаками были, что бы под IE не править.
#3 Fokir 12-06-2011 в 22:13
А нельзя было сразу в стилях прописать путь к фоновому изоброжению
#4 serg 06-12-2011 в 11:15
А как сделать, что бы в зависимости от выбранного чекбокса при помощи jQuery динамически формировался выпадающий список.
#5 Евгений 06-12-2011 в 11:47
Ну это уже надо делать с помощью ajax, который будет отправлять нужные параметры в зависимости от выбранных чекбоксов, а в файле обработчике по этим параметрам будет формироваться нужный список.
#6 Александр 27-12-2011 в 03:45
IE в топку... я под него даже не делаю ничего... надо как в контакте делать, там под ИЕ вообще не зайдёшь, точнее можно вроде, но не всё как надо...
#7 Вадим 25-01-2012 в 16:22
как сделать, чтобы он был выбран изначально?
#8 Евгений 25-01-2012 в 16:47
Нужно дописать параметр checked="checked"
#9 vlad 16-02-2012 в 10:09
Спасибо!
#10 Диман 22-04-2012 в 00:32
Нехватает проверки при загрузке страницы на изначально активные чекбоксы и радиокнопки. Пришлось дописывать самому.
#11 Диман 22-04-2012 в 01:45
Также не работает с несколькими группами радиокнопок.
Скрипт очень сырой и недоделаный до желаемого результата:(
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки