Как откорректировать работу JS-скрипта?

177

11 октября 2021, 07:00

Есть JS-скрипт, который выполняет следующую функцию: когда пользователь делает активными 3 чекбокса, пользователя перебрасывает на страницу по сгенерированной чекбоксами ссылке.

Ссылка формируется из value="" трех активированных пользователем чекбоксов, в value помещены отрезки полной ссылки. Например, в одном "/uslugi", во втором "/remont/", в третьем "remont.html" = site.ru/uslugi/remont/remont.html

Чекбоксы из которых следует захватывать value указаны в скрипте нужным классом. Теперь сама проблема: когда на странице более 3 элементов одного итого же класса - скрипт почему-то берет value всех чекбоксов, получается каша.

Помогите, пожалуйста, решить проблему. Нужно чтобы бралось value только активированных пользователем чекбоксов, а остальные, хоть и с тем же классом, не захватывались.

Спасибо!

<input id="link1" class="linkinp form-check-input" name="link" type="checkbox" value="/razbito-steklo/">

const checks = document.querySelectorAll('input.form-check-input') 
 
checks.forEach(c => c.addEventListener('click', onClick)) 
 
function onClick() { 
  if ([...checks].filter(c => c.checked).length === 3) { 
    const url = 'http://site.ru' + [...checks].map(c => c.value).join('') 
 
   location.href = url 
  } 
}

Answer 1

filter не изменяет исходный массив, а создает новый, соответственно там, где вы объединяете значения, вы всё еще работает с исходным массивом, а не отфильтрованным. Присвойте результат фильтрации новой переменный и работайте уже с ней

const checks = document.querySelectorAll('input.form-check-input') 
 
checks.forEach(c => c.addEventListener('click', onClick)) 
 
function onClick() { 
  const activeChecks = [...checks].filter(c => c.checked); 
  if (activeChecks.length === 3) { 
    const url = 'http://site.ru' + activeChecks.map(c => c.value).join('') 
 
   console.log(url); 
  } 
}

<input id="link1" class="linkinp form-check-input" name="link" type="checkbox" value="/1"> 
<input id="link1" class="linkinp form-check-input" name="link" type="checkbox" value="/2"> 
<input id="link1" class="linkinp form-check-input" name="link" type="checkbox" value="/3"> 
<input id="link1" class="linkinp form-check-input" name="link" type="checkbox" value="/4">

Answer 2

window.onload = (event) => {
  let checkboxs = document.getElementsByClassName('checkbox');
  [...checkboxs].forEach(element => element.onchange = (event) => {
    let count = [...checkboxs].filter(element => element.checked);
    if (count.length === 3) {
      let url = 'https://www.site.ru' + count.map(element => element.getAttribute('value')).join('');
      location.href = url;
    }
  })
}

Answer 3

Вы проверку на checked сделали,но в переменную const url = 'http://site.ru' + [...checks] пихаете все чекбоксы без фильтрации.

Исправил ваш код:

const checks = document.querySelectorAll('input.form-check-input') 
 
checks.forEach(c => c.addEventListener('click', onClick)) 
 
function onClick() { 
  if ([...checks].filter(c => c.checked).length === 3) { 
    const url = 'http://site.ru' + [...checks].filter(c => c.checked).map(c => c.value).join('') 
 
   location.href = url 
  } 
}