Добавление и удаление из массива JS

Question

У меня есть список

<ul>
<li><input type="ckeckbox" data-brand="audi"></li>
<li><input type="ckeckbox" data-brand="mersedes"></li>
<li><input type="ckeckbox" data-brand="bmw"></li>
</ul>

Есть переменная МАССИВ

let brandArrField = [];

Я хочу сделать так чтоб при клике на чебокс если установлена галочка добавлялась информация в массив из атрибута data-brand этого чебокса

Но при снятии галочки убиралась эта информация

Пытаюсь сделать что то типо такого

$('.custom-checkbox').click( function () {
    if ($(this).prop('checked')) {
        $(this).parents('li').addClass('checked')
    } else {
        $(this).parents('li').removeClass('checked')
    }
    $(this).parents('ol').find('li.checked').each( function () {
        brandArrField = brandArrField + '"' + $(this).find('.custom-checkbox').attr('data-brand') + '",'
    })
    console.log(brandArrField)
})

Но при снятии галочки он просто плюсует значение к тому что было, возможно JS не успевает обработать информацию DOM

Answer 1

Как-то так хотели?

let brandArrField = [];

$('.custom-checkbox').click( function () {
    if ($(this).prop('checked')) {
        $(this).parents('li').addClass('checked')
    } else {
        $(this).parents('li').removeClass('checked')
    }
    brandArrField = [];
    $(this).parents('ul').find('li.checked').each( function () {
        brandArrField.push($(this).find('.custom-checkbox').attr('data-brand'));
    })
    console.log(brandArrField)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><input class="custom-checkbox" type="checkbox" data-brand="audi">audi</li>
<li><input class="custom-checkbox" type="checkbox" data-brand="mersedes">mersedes</li>
<li><input class="custom-checkbox" type="checkbox" data-brand="bmw">bmw</li>
</ul>

БЛОГ НА HUSL

Добавление и удаление из массива JS

Ответы (1 шт):