Стилизация checkbox
Приветствую всех.
Делаю стилизацию чекбокса: - прячу все чекбоксы - добавляю span с классом (и соответственно стили) - проверяю были ли checked, добавляю класс для активных псевдочекбоксов - при клике на псевдочекбокс, передаю клик самому чекбоксу
$(document).on('click', '.input_checkbox', function(){
$(this).prev().click();
});
- при изменении чекбокса изменяю класс псевдочекбоксу Всё ок, работает. Но если добавить label <label for="check"> <input type="checkbox" id="check"> <span class="input_checkbox"></span> bla-bla </label> По клику на label происходит передача клика чекбоксу, псевдочебокс изменился - ok Но если при такой структуре кликнуть по псевдочебоксу он передаст клик на чекбокс + клик передаст и label :( Как правильно отловить это событие от label ? писать проверку на родителя чекбокса ? типа
if ($(this).closets('label')) e.defaultPrevented()
Помогите разобраться. з.ы. Совет использовать плагин не нужен, т.к. это не для сайта, а для себя :) |
Цитата:
|
Статейка на эту тему...
http://xiper.net/collect/html-and-cs...i-radio-na-css |
Label передает клик автоматически в инпут, не ?
получается дабл клик проблема не в том, что я не могу привязать. а хочу разобраться) для себя, учусь использовать js/jquery |
Цитата:
|
Цитата:
Цитата:
а если пользователь кликает по псевдочекбоксу, он автоматически кликает и по label, т.к. псевдочекбокс вложен в label: label input type="checkbox" span.pseudocheckbox |
Цитата:
Ничего больше мудрить не нужно.
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
input[type='checkbox'] {
display: none;
}
.input_checkbox {
display: inline-block;
width: 17px;
height: 17px;
background: url('http://xozblog.ru/wp-content/uploads/2012/10/check_radio_sheet.png') 0 0;
}
.input_checkbox.on {
background: url('http://xozblog.ru/wp-content/uploads/2012/10/check_radio_sheet.png') -20px 0;
}
</style>
<script type='text/javascript'>
$(function () {
$('label').mouseup(function (){
$(this).find('.input_checkbox').toggleClass('on');
});
});
</script>
</head>
<body>
<label for="check">
<input type="checkbox" id="check">
<span class="input_checkbox"></span>
bla-bla
</label>
</body>
</html>
|
:-? по желанию ... .add(this) можно убрать
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span.pseudocheckbox {
background: #FFCC00;
}
label.pseudocheckbox{
border-radius: 8px;
border: #00CCFF 2px solid;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
$(document).on('click', 'label', function(event)
{
$('span', this).add(this).toggleClass('pseudocheckbox', $('input', this).prop('checked'));
}
)
}
);
</script>
</head>
<body>
<label for="check">
<input type="checkbox" id="check">
<span class="input_checkbox">pseudocheckbox</span>
bla-bla
</label>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:42. |