Как отмечать определенные 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]

О каком data-атрибуте идёт речь:

const key = 'id';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

Назначаем обработчик клика непосредственно ссылкам:

document.querySelectorAll(attrSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  document.querySelector(`#${this.dataset[key]}`).checked ^= 1;
});

Или, применяем делегирование:

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(attrSelector)) &&
  (t = document.getElementById(t.getAttribute(attr))) &&
  (t.checked = !t.checked)
);