Форум

utb · #1 (**permalink**) 28.10.2014, 09:19

Приветствую всех.
Делаю стилизацию чекбокса:
- прячу все чекбоксы
- добавляю 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()

Помогите разобраться.

з.ы. Совет использовать плагин не нужен, т.к. это не для сайта, а для себя

ksa · #2 (**permalink**) 28.10.2014, 09:49

Сообщение от utb

Как правильно отловить это событие от label ?

При клике на label остается только поменять внешний вид чека. Больше вообще ничего "ловить" и делать не нужно...

ksa · #3 (**permalink**) 28.10.2014, 09:50

Статейка на эту тему...
http://xiper.net/collect/html-and-cs...i-radio-na-css

utb · #4 (**permalink**) 28.10.2014, 11:58

Label передает клик автоматически в инпут, не ?
получается дабл клик
проблема не в том, что я не могу привязать. а хочу разобраться) для себя, учусь использовать js/jquery

ksa · #5 (**permalink**) 28.10.2014, 14:38

Сообщение от utb

Label передает клик автоматически в инпут, не ?

Вот это и нужно использовать! А не бороться с этим...

utb · #6 (**permalink**) 31.10.2014, 07:33

Сообщение от ksa

При клике на label остается только поменять внешний вид чека. Больше вообще ничего "ловить" и делать не нужно...

Сообщение от ksa

Вот это и нужно использовать! А не бороться с этим...

ok,
а если пользователь кликает по псевдочекбоксу, он автоматически кликает и по label, т.к. псевдочекбокс вложен в label:

label
  input type="checkbox"
  span.pseudocheckbox

ksa · #7 (**permalink**) 31.10.2014, 08:45

Сообщение от utb

а если пользователь кликает по псевдочекбоксу, он автоматически кликает и по label, т.к. псевдочекбокс вложен в label

Как же тебе еще объяснить... Неиспользуй другие клики. Лабель все сделает за тебя. При клике на нее просто меняй внешний вид и все. Значение в настоящем чеке само поменяется.

Ничего больше мудрить не нужно.

<!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>

рони · #8 (**permalink**) 31.10.2014, 09:56

по желанию ... .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>

Форум

Справочник

Discord чат

Курсы javascript