Управление checkbox'ами
Здравствуйте, делаю некое подобие БЭМ-компонентов. Дошел до 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'). Подскажите нормальное ли решение или есть что можно подправить? Спасибо |
<!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>
|
:-?
<!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>
|
j0hnik,
Спасибо. Класс меняется, но вот атрибут - нет, судя по коду его там и нет=) |
Цитата:
|
Цитата:
|
Tipylja,
если вам атрибут нужен, а не свойство то его нужно в скрипте меня. в целом если ваш пример вас устраивает исправьте
$(this).children().children('.checkbox__control');
на
$(this).find('.checkbox__control');
и пользуйтесь |
Всем как всегда спасибо! Вот финальный скрипт так выглядит:
$(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');
};
});
});
|
Tipylja,
зачем нужно атрибут менять? |
Цитата:
https://ru.bem.info/platform/libs/be...ktop/checkbox/ Я эту часть кода, на данный момент уберу, но если возникнет необходимость, то можно будет сразу же воспользоваться :-? PS. Возможно, так как класс .checkbox--checked, задается деду чекбокса, то получать именно чекбоксы, которые включены, как раз можно по этому атрибуту.... |
| Часовой пояс GMT +3, время: 07:28. |