Форум

Tipylja · #1 (**permalink**) 17.03.2018, 15:17

Здравствуйте, делаю некое подобие БЭМ-компонентов. Дошел до checkbox. Есть вот такая структура чекбокса:

<label class="checkbox checkbox--size-m">
    <span class="checkbox__box">
        <input class="checkbox__control" type="checkbox" autocomplete="off">
    </span>
    <span class="checkbox__text">Коробка</span>
</label>

При клике на checkbox, вернее на label с классом checkbox, элементу label добавляется класс .checkbox--checked, а непосредственно инпату(который и является чекбоксом) с классом .checkbox__control добавляется атрибут checked="checked":

<label class="checkbox checkbox--size-m checkbox--checked">
    <span class="checkbox__box">
        <input class="checkbox__control" type="checkbox" autocomplete="off" checked="checked">
    </span>
    <span class="checkbox__text" >Конфеты</span>
</label>

Вот такой код мне удалось написать для выполнения этой задачи:

$(function() {
    $(".checkbox").on("click", function(event) {
        event.preventDefault();       
        $(this).toggleClass("checkbox--checked");

        var chekcbox = $(this).children().children('.checkbox__control');
        
        if (chekcbox.attr('checked')) {
            chekcbox.removeAttr('checked');
        } else {
            chekcbox.attr('checked', 'checked');
        };

    });
});

Все в принципе работает, никаких проблем я не обнаружил пока, но насколько это правильно. Допустим правильно ли отслеживать именно клик $(".checkbox").on("click" .....) или возможно есть более подходящее событие. И очень смущает поиск инпата $(this).children().children('.checkbox__control'). Подскажите нормальное ли решение или есть что можно подправить? Спасибо

j0hnik · #2 (**permalink**) 17.03.2018, 16:00

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

	<label class="checkbox checkbox--size-m">
		<span class="checkbox__box">
			<input class="checkbox__control" type="checkbox" autocomplete="off">
		</span>
		<span class="checkbox__text">Коробка</span>
	</label>
<script>

$(function() {
    $(".checkbox__control").on("change", function(event) {
 	if(this.checked) $(this).closest(".checkbox").addClass('checkbox--checked');
 	else $(this).closest(".checkbox").removeClass('checkbox--checked');
    });
});

	</script>
</body>
</html>

рони · #3 (**permalink**) 17.03.2018, 16:31

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  .checkbox--checked   {
    background-color:  #FF0000;
  }

  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

  <label class="checkbox checkbox--size-m">
    <span class="checkbox__box">
      <input class="checkbox__control" type="checkbox" autocomplete="off">
    </span>
    <span class="checkbox__text">Коробка</span>
  </label>
<script>

$(function() {
    $(".checkbox").on("change", function(event) {
    $(this).toggleClass('checkbox--checked');
    });
});

  </script>
</body>
</html>

Tipylja · #4 (**permalink**) 17.03.2018, 16:42

j0hnik,
Спасибо. Класс меняется, но вот атрибут - нет, судя по коду его там и нет=)

Tipylja · #5 (**permalink**) 17.03.2018, 16:45

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

$(function() {

    $(".checkbox").on("change", function(event) {

    $(this).toggleClass('checkbox--checked');

    });

});

Тут немного не то, класс .checkbox у label=)

рони · #6 (**permalink**) 17.03.2018, 17:21

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

Тут немного не то, класс .checkbox у label=)

не понимаю

j0hnik · #7 (**permalink**) 17.03.2018, 17:21

Tipylja,
если вам атрибут нужен, а не свойство то его нужно в скрипте меня.
в целом если ваш пример вас устраивает
исправьте

$(this).children().children('.checkbox__control');

на

$(this).find('.checkbox__control');

и пользуйтесь

Tipylja · #8 (**permalink**) 17.03.2018, 17:32

Всем как всегда спасибо! Вот финальный скрипт так выглядит:

$(function() {
    $(".checkbox__control").on("change", function(event) {

        var chekcbox = this;

        if(chekcbox.checked) $(chekcbox).closest(".checkbox").addClass('checkbox--checked');
        else $(chekcbox).closest(".checkbox").removeClass('checkbox--checked');



        if ($(chekcbox).attr('checked')) {
            chekcbox.removeAttr('checked');
        } else {
            $(chekcbox).attr('checked', 'checked');
        };
    });
});

рони · #9 (**permalink**) 17.03.2018, 18:35

Tipylja,
зачем нужно атрибут менять?

Tipylja · #10 (**permalink**) 18.03.2018, 00:46

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

Tipylja,
зачем нужно атрибут менять?

Если честно, на данный момент не знаю где бы мне это пригодилось, так сделано у яндекса в бэм-компонентах
https://ru.bem.info/platform/libs/be...ktop/checkbox/
Я эту часть кода, на данный момент уберу, но если возникнет необходимость, то можно будет сразу же воспользоваться

PS. Возможно, так как класс .checkbox--checked, задается деду чекбокса, то получать именно чекбоксы, которые включены, как раз можно по этому атрибуту....

Форум

Справочник

Discord чат

Курсы javascript