Как объединить отрезок кода в одну функцию?

Question

[Loserver]

Есть код, в нем повторяется задание константы.
Во всем коде отличаются только номера в ID, таких новых ID - 20-30, если выполнять таким методом. то это еще 28 таких отрезков кода.
Как их объединить в одну функцию?

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('tab1').style.display = 'block';
} else {
document.getElementById('tab1').style.display = 'none';
}
})

const checkbox = document.getElementById('link6')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('tab2').style.display = 'block';
} else {
document.getElementById('tab2').style.display = 'none';
}
})

Answer 1

[Дмитрий Беляев]

const checkbox2tabMap = {
  link5: 'tab1',
  link6: 'tab2'
  // ... продолжите сами
};
function onCheckboxChange(event) {
  const tab = document.getElementById(checkbox2tabMap[event.target.id]);
  if(!tab) { return; }
  tab.style.display = event.target.checked ? 'block' : 'none';
}
Object.keys(checkbox2tabMap).forEach(
  id => document.getElementById(id).addEventListener('change', onCheckboxChange)
);

Answer 2

[zkrvndm]

Считать все нужные чекбоксы на странице через querySelectorAll, полученный массив обойти через цикл for и внутри цикла уже вешать обработчик addEventListenet на ваши чекбоксы.

Comments

[Loserver]

Я новичок в JS, если Вас не затруднит, могли бы Вы описать это кодом?
Заранее спасибо!