<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form id="form">
<input type="text" id="name_button" list="name-button-list">
<datalist id="name-button-list"></datalist>
<input type="checkbox" name="options" checked>
<input type="checkbox" name="options">
<input type="checkbox" name="options">
</form>
<script>
// Вспомогательные функции, которые помогают
// найти элемент(-ы) по указанному селектору
// в контексте какого-либо элемента
function $(selector, context = document) {
return context.querySelector(selector);
}
function $$(selector, context = document) {
return context.querySelectorAll(selector);
}
// 1
for(const element of $$("#form input[name=options]:checked")) {
element.value;
}
// 2
document.addEventListener("change", ({ target }) => {
if(!target.matches("#form input[name=options]:checked")) return;
/*const Button = */target.value; // значение конкретно того элемента, что поменяли
});
// 3. Обычно не нужно прослушивать событие change,
// когда прослушиваете input.
// Обратите внимание, что у строки "name_button", нет спереди
// символа «решётка», поскольку id возвращает само имя
// идентификатора элемента.
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("input", ({ target }) => {
if(target.id !== "name_button") return;
const getInput = target.value;
console.log(getInput);
});
});
// 4
const getURLmessage = [
"test",
"test1",
"test2",
"test3"
];
$("#name_button").list.append(...getURLmessage.map(m => new Option(m)));
</script>
</body>
</html>