Блог

Главная - Вопросы по программированию - измените массив в зависимости от того, установлен или снят флажок, используя ванильный JavaScript

измените массив в зависимости от того, установлен или снят флажок, используя ванильный JavaScript

#javascript #arrays #checkbox

Вопрос:

Я совершенно новичок в javascript. Любая помощь очень ценится.

Я создал упрощенный пример для более легкого объяснения. Я хочу изменить a finalArray в зависимости от того, установлены или сняты флажки.

Так, например, если friends strangers установлены флажки и, то finalArray_ должно = ["friend1" ,"friend2", "stranger1", "stranger2"] .

Если установлен только enemies флажок, то finalArray_ должно = ["enemy1" ,"enemy2"] . И так далее.

 <body>
    <input type="checkbox" data-id="friends_"> Friends <br />
        <!-- other code and functionality -->
    <input type="checkbox" data-id="enemies_"> Enemies <br />
        <!-- other code and functionality -->
    <input type="checkbox" data-id="strangers_"> Strangers <br />

    <script>
        const friends_ = ["friend1","friend2"];
        const enemies_ = ["enemy1","enemy2"];
        const strangers_ = ["stranger1","stranger2"];
    </script>
</body>

Я пробовал это, но я знаю, что это дерьмовое решение, которое не работает, потому что я не могу связать такую строку.

 <script>
    const friends_ = ["friend1", "friend2"];
    const enemies_ = ["enemy1", "enemy2"];
    const strangers_ = ["stranger1", "stranger2"];

    const checkboxes = document.querySelectorAll("input[type=checkbox]");
        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                checked_boxes = Array.from(checkboxes).filter(i => i.checked).map(i => i.dataset.id).join();
                const finalArray = [].concat(checked_boxes);
                console.log(finalArray); //Array [ "friends_,strangers_" ]
            })
        })
</script>

Спасибо за ваши предложения.

Комментарии:

1. Итак, вы хотите, чтобы выбранные флажки были в массиве?

2. да и динамически обновляйте массив при каждом изменении флажков

Ответ №1:

Я объединил различные блоки в один объект, чтобы использовать идентификатор данных в качестве ключа для получения массива.

Я не запускал его с тех пор, как сделал это на своем телефоне, но вы можете попробовать, и это должно сработать.

ред:

Теперь я изменил его на своем компьютере. Должен запускаться и показывать вам вывод при нажатии на флажки.

ED2:

Я перенес всю логику в функцию, которая вызывается при загрузке страницы и при переключении флажка.

 const units = {
  friends_: ["friend1", "friend2"],
  enemies_: ["enemy1", "enemy2"],
  strangers_: ["stranger1", "stranger2"],
}

let selectedUnits = [];

const checkBoxes = document.querySelectorAll("input[type=checkbox]");

checkBoxes.forEach(elm => elm.addEventListener("change", updateUnits));

document.onload = updateUnits();

function updateUnits() {
  selectedUnits = Array.from(checkBoxes)
    .filter(elm => elm.checked)
    .flatMap(elm => units[elm.getAttribute('data-id')]);
  console.clear();
  console.log(selectedUnits);
} 
 <body>
  <input type="checkbox" data-id="friends_" checked> Friends <br />
  <!-- other code and functionality -->
  <input type="checkbox" data-id="enemies_"> Enemies <br />
  <!-- other code and functionality -->
  <input type="checkbox" data-id="strangers_"> Strangers <br />
</body>

Комментарии:

1. существует неперехваченная ошибка типа: флажки.фильтр-это не функция, я ее проверю.

2. Попробуй сейчас. Установите флажок в списке узлов, поэтому мне пришлось сначала преобразовать его в массив с помощью Array.from().

3. да, это отлично работает! я заметил , что если я установлю какой-то флажок по умолчанию (например <input type="checkbox" checked data-id="friends_"> Friends <br /> , программа не работает должным образом, как раньше. Есть идеи, как это исправить?

Ответ №2:

Вы можете создать dict набор данных с использованием и obj key-value пар checkbox данных.

Когда флажок установлен, вы можете включить его id , dict а затем получить результаты, выполнив итерацию dict 

 const friends_ = ["friend1", "friend2"];
const enemies_ = ["enemy1", "enemy2"];
const strangers_ = ["stranger1", "stranger2"];

const dict = new Set();
const obj = { friends_, enemies_, strangers_ };

const checkboxes = document.querySelectorAll( "input[type=checkbox]" );
checkboxes.forEach( function ( checkbox ) {
    checkbox.addEventListener( 'change', function (e) {
        const id = e.target.dataset.id;
        if(dict.has(id)) dict.delete(id);
        else dict.add(id);

        const result = [];
        for(let key of dict) result.push(...obj[key])
        console.log(result);
    } )
} ) 
 body {
  display: flex;
} 
 <input type="checkbox" data-id="friends_" id="Friends" />
<label for="Friends">Friends</label>
<!-- other code and functionality -->
<input type="checkbox" data-id="enemies_" id="Enemies" />
<label for="Enemies">Enemies</label>
<!-- other code and functionality -->
<input type="checkbox" data-id="strangers_" id="Strangers" />
<label for="Strangers">Strangers</label>
Метки: , ,