Как убирать значение value у скрытого инпута при повтором клике на checkbox?

Question

Есть код, который записывает значение чекбокса .input-js в скрытый инпут .additional Как мне при повторном клике (снимаем галочку с чекбокса) по чекбоксу удалять значение (только то, на котором был клик) в скрытом инпуте?

const inputs = document.querySelectorAll('.input-js');
const inputHidden = document.getElementById('additional');


// Обход цикла
inputs.forEach((input) => {
    input.addEventListener('click', handlerInput);
});

function handlerInput(event) {


    if (this.classList.contains("input-checked-js")) {
        let replace = inputHidden.value;
        let string = this.value;
        this.value = string.replace(replace, '');
        this.classList.remove("input-checked-js");
    } else {
        this.classList.add("input-checked-js");    
        inputHidden.value += this.value;
        inputHidden.value += '; ';
    }
}

Answer 1

Можно воспользоваться методом replace. Будем из поля убирать первое найденное вхождение value выбранного чек бокса.

  const inputs = document.querySelectorAll('.input-js');
  const inputHidden = document.getElementById('additional');
  // Обход цикла
  inputs.forEach((input) => {
    input.addEventListener('click', handlerInput);
  });

  function handlerInput(event) {
    if (this.classList.contains("input-checked-js")) {
      inputHidden.value = inputHidden.value.replace(this.value + '; ', '');
      this.classList.remove("input-checked-js");
    } else {
      this.classList.add("input-checked-js");
      inputHidden.value += this.value + '; ';
    }
  }

<input type="checkbox" class="input-js" value="val1">
<input type="checkbox" class="input-js" value="val2">
<input type="checkbox" class="input-js" value="val3">
<input type="checkbox" class="input-js" value="val1">
<input type="checkbox" class="input-js" value="val2">
<input type="text" id="additional">

Answer 2

Как мне при повторном клике (снимаем галочку с чекбокса) по чекбоксу удалять значение (только то, на котором был клик) в скрытом инпуте?

Поскольку ТС не предоставил свой html... Я предложу свой вариант верстки, который будет намного удобнее в обработке.

Так же у меня "итоговый" инпут не скрытый, дабы было видно результат работы моего скрипта.

document.querySelector('div').addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'INPUT') return
  o.classList.toggle('input-checked-js')
  const a = [...document.querySelectorAll('.input-checked-js')].reduce((a, o) => [...a, o.value], [])
  document.querySelector('#additional').value = a.join(', ')
})

<div>
  <input class='input-js' value='1' type='checkbox' />
  <input class='input-js' value='2' type='checkbox' />
  <input class='input-js' value='3' type='checkbox' />
  <input class='input-js' value='4' type='checkbox' />
</div>
<input id='additional' />

БЛОГ НА HUSL

Как убирать значение value у скрытого инпута при повтором клике на checkbox?

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