Использование кнопок HTML в качестве метки радиовхода

Question

Я хочу сделать выбор радиовхода нажатием кнопок.(это где у вас есть несколько вариантов, и вы можете выбрать только один, обычно это делается с радиоточками)
Я использовал

    <input id="test"><label for="test">Click Me</label>

Для достижения того же эффекта, но с текстом (при нажатии на текстовую кнопку-переключатель устанавливается значение флажка = «истина», но независимо от того, как я пытаюсь приблизиться к нему при использовании HTML)Кнопки, которые я никогда не смогу проверить радио-вход, просто нажав кнопку, а не щелкнув текст.
Так что это и вариант этого, где вы устанавливаете кнопку как родитель для тега и т. д., не работают для меня.

<input id="test"><label for="test"><button>Click Me</button></label>

Я могу использовать что-то вроде addEventListeners для кнопок и установить выбор в javascript, но подумал, что, возможно, существует очевидный чистый HTML-способ, который я просто не смог понять.Вот небольшая ручка 1018 * только для того, чтобы возиться - Ура

Answer 1

Просто используйте ваш первый пример и стилизуйте элемент label, чтобы он выглядел как кнопка.

Вот краткий пример:

label {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  padding: 5px;
}

input {
  display: none;
}

input:checked + label {
  background: red;
}

<input id="radio1" name="radio" type="radio" />
<label for="radio1">Click me</label>
<input id="radio2" name="radio" type="radio" />
<label for="radio2">Click me</label>
<input id="radio3" name="radio" type="radio" />
<label for="radio3">Click me</label>