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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как отмечать определенные checkbox при клике по ссылке? (https://javascript.ru/forum/misc/76648-kak-otmechat-opredelennye-checkbox-pri-klike-po-ssylke.html)

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

Доброе время суток,
Подскажите пожалуйста, как можно отмечать 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">

oleglantukh,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
document.addEventListener('DOMContentLoaded', function() {
var a =document.querySelectorAll('[data-id]');
[].forEach.call(a, function(link) {
   var id = link.dataset.id,
   el = document.getElementById(id);
   link.addEventListener("click", function(event) {
      event.preventDefault();
      el.checked = !el.checked
})
});
});
  </script>
</head>

<body>
<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">

</body>
</html>

Цитата:

Сообщение от oleglantukh

javascript:void(0);

Зачем вам переходить по этому адресу?
Зачем мне это добавлять в закладки?
Что я должен увидеть открыв эту ссылку в новой вкладке?
Зачем вы добавляете функциональность, которую потом пытаетесь устранить?

То, что вы пытаетесь решить уже давно решено! Используйте элемент <LABEL>.

<!DOCTYPE html>
<html>
	<head>
		<title>Untitled</title>
		<meta charset="utf-8">
	</head>
	<body>
		<label for="continent-1">Африка</label>
		<label for="continent-2">Азия</label>
		<label for="continent-3">Европа</label>
		...
		<input type="checkbox" id="continent-1">
		<input type="checkbox" id="continent-2">
		<input type="checkbox" id="continent-3">
	</body>
</html>

Цитата:

Сообщение от Malleys (Сообщение 502905)

<!DOCTYPE html>
<html>
	<head>
		<title>Untitled</title>
		<meta charset="utf-8">
	</head>
	<body>
		<label for="continent-1">Африка</label>
		<label for="continent-2">Азия</label>
		<label for="continent-3">Европа</label>
		...
		<input type="checkbox" id="continent-1">
		<input type="checkbox" id="continent-2">
		<input type="checkbox" id="continent-3">
	</body>
</html>

Цитата:

Сообщение от Malleys

Я же не совсем уже)
label - это первое что я попробовал) К сожалению, если можно было, так бы и сделал. У меня карта SVG, надо кликабельными континенты сделать, label там не захотел работать, только ссылки.

Цитата:

Сообщение от рони (Сообщение 502904)

<script>
document.addEventListener('DOMContentLoaded', function() {
var a =document.querySelectorAll('[data-id]');
[].forEach.call(a, function(link) {
   var id = link.dataset.id,
   el = document.getElementById(id);
   link.addEventListener("click", function(event) {
      event.preventDefault();
      el.checked = !el.checked
})
});
});
  </script>

Спасибо за помощь, что то у меня он не сработал, но нашел другое решение, помогло.
Но все равно спасибо!

Вот код, который сработал:

$(document).ready(function() {
		$("a").on("click", function() {
			var el = $("#" + $(this).data("id"));
			el.prop("checked", !el.prop("checked"));
		});
	});