Форум

oleglantukh · #1 (**permalink**) 29.01.2019, 23:39

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

рони · #2 (**permalink**) 30.01.2019, 00:04

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>

Malleys · #3 (**permalink**) 30.01.2019, 00:15

Сообщение от 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>

oleglantukh · #4 (**permalink**) 30.01.2019, 01:14

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

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

То, что вы пытаетесь решить уже давно решено! Используйте элемент <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

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

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

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

oleglantukh · #5 (**permalink**) 30.01.2019, 01:22

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

,

<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"));
		});
	});

Форум

Справочник

Discord чат

Курсы javascript