Как отмечать определенные checkbox при клике по ссылке?

Question

[Oleh Lantukh]

Доброе время суток,
Подскажите пожалуйста, как можно отмечать checkbox, с определенным значением id при клике по ссылке c таким же значением data атрибута?
Пример:

<a href="javascript:void(0);" data-id="continent-1">Африка</a>
<a href="javascript:void(0);" data-id="continent-2">Азия</a>
<a href="javascript:void(0);" data-id="continent-3">Европа</a>
...
<input type="checkbox" id="continent-1">
<input type="checkbox" id="continent-2">
<input type="checkbox" id="continent-3">

Comments

[Froggyweb]

это костыль либо чекбосы не нужны, либо ссылки
А если я чекбокс отмечу без клика по ссылке?

[Oleh Lantukh]

Froggyweb, Там без этого к сожалению никак, у checkbox есть label со значением названия континента, когда checkbox отмечен, название выделяется цветом.
Также есть SVG карта, каждый континент обернут в сылку, необходимо кликая по континенту, отмечать checkbox

<a href="javascript:void(0);" data-id="continent-1"><path d="..." /></a>
<label>
Африка
<input type="checkbox" id="continent-1">
</label>

[RAX7]

Oleh Lantukh,

<a href="javascript:void(0);" data-id="continent-1"><path d="..." /></a>

как это работает? не должно же.

[Oleh Lantukh]

RAX7,
вот код, все работает
https://codepen.io/oleglantuh/pen/omzRop

Answer 1

[coderisimo]

уот так уот!

https://codepen.io/coderisimo-the-encoder/pen/dapL...

Comments

[Oleh Lantukh]

Спасибо огромное!)

[coderisimo]

Такое же "пожалуйста )!

Answer 2

[0xD34F]

document.addEventListener('click', function(e) {
  const el = document.getElementById(e.target.dataset.id);
  if (el) {
    el.checked = !el.checked;
  }
});

или

const buttons = document.querySelectorAll('[data-id]');
const onClick = e => checkboxes[e.target.dataset.id].checked ^= 1;
const checkboxes = Array
  .from(buttons, n => n.dataset.id)
  .reduce((acc, n) => (acc[n] = document.querySelector(`#${n}`), acc), {});

buttons.forEach(n => n.addEventListener('click', onClick));