ПРЕОБРАЖАЕМ ЭЛЕМЕНТЫ HTML: ЧЕКБОКСЫ И РАДИО


ПРЕОБРАЖАЕМ ЭЛЕМЕНТЫ HTML: ЧЕКБОКСЫ И РАДИО


Давайте оформим стандартные html элементы checkbox и radio с помощью jQuery и CSS.

Разметка HTML
Начнем с основы html:
<html>
    <head></head>
    <body>
        <input id="CheckBox1" type="checkbox" class="CheckBoxClass">
        <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Чекбокс 1</label>
    </body>
</html>


Теперь скроем чекбокс с помощью CSS:
<style>
    .CheckBoxClass{
        display: none;
    }
</style>


Теперь чекбокс скрыт. Если вы кликнете на лейбл (Чекбокс 1), чекбокс будет по прежнему включаться/отключаться, но этого мы не увидим. Теперь, если чекбокс установлен, то нам нужно изменить стиль лейбла, чтоб мы знали, что он отмечен, выбран. Добавим CSS для выбранного label класса. И скрипт для переключения класса.

.LabelSelected{  
    border: 1px dotted black;  
}  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.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");  
        }  
    });  
});  
</script>


И тоже самое проделать с radio элементами:
$(".RadioClass").change(function(){  
    if($(this).is(":checked")){  
        $(".RadioSelected:not(:checked)").removeClass("RadioSelected");  
        $(this).next("label").addClass("RadioSelected");  
    }  
});  


Смотрите исходный код демки.

Скачать исходник:
checkbox_radio.rar


скрипт скрипт ПРЕОБРАЖАЕМ ЭЛЕМЕНТЫ HTML: ЧЕКБОКСЫ И РАДИО
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2515
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация