Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=“prim” и name=“prim2” то выводит только name=“prim2”(value)

139

17 февраля 2021, 07:30

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Опрос 8"A"</title>
</head>
<body>
    <input type="radio" name="prim" value="a">a<br>
    <input type="radio" name="prim2" value="b">b<br>
    <input type="radio" name="prim3" value="c">c<br>
    <div id="descr" style="visibility: hidden">
        <button id="one">Отправить</button>
    </div>
    <script>
        var button = document.getElementById("one"),
            value;
        document.body.addEventListener('click', () => {
                var target = event.target;
                if (target.tagName != 'INPUT') return;
                if (target.checked) {
                    button.parentNode.style.visibility = "visible";
                    value = target.value;
                }
            }
        );
        button.addEventListener('click', () => {
                alert(value);
            }
        )
    </script>

Answer 1

Если хотите иметь возможность выбрать несколько вариантов, то radio - не самый подходящий вариант. Семантически правильнее будет использовать checkbox

function getCheckedValues() { 
  return Array 
    .from(document.querySelectorAll('input[type="radio"]')) 
    .filter((checkbox) => checkbox.checked) 
    .map((checkbox) => checkbox.value); 
} 
 
document.getElementById("one").addEventListener('click', () => { 
  console.log(getCheckedValues()) 
})

<input type="radio" name="prim" value="a">a 
<br> 
<input type="radio" name="prim2" value="b">b 
<br> 
<input type="radio" name="prim3" value="c">c 
<br> 
 
<div id="descr"> 
  <button id="one">Отправить</button> 
</div>

Answer 2

var button = document.getElementById("one"),
    value = [],
    input = document.querySelectorAll('input');
document.body.addEventListener('click', () => {
  var target = event.target;
  if (target.tagName != 'INPUT') return;
  if (target.checked) {
    value.push(target.value);
    value = [...new Set(value)];
    button.parentNode.style.visibility = "visible";
  }
});
button.addEventListener('click', () => {
  alert(value);
})

Можно было уточнить этот вопрос в предыдущей теме

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Неповторяющийся случайный фон

Пытаюсь реализовать кнопку, по нажатию на которую должен выставляться случайный фон, да так, чтобы картинки при повторном нажатии не повторялисьСделал...

112

javascript