用户友好的单选按钮点击检测

Question

我正在制作一个带有单选按钮的表单，每当用户更改任何内容时都会调用更新函数。

但是，我在将它与用户友好的单选按钮结合使用时遇到了问题，我希望在文本和按钮周围都有一个按钮区域，以便于单击。

我在检测同时点击区域、文本和按钮时遇到问题。 - 到目前为止，我只是通过比较 MouseEvent.target 和 id 的列表（我必须给每个元素）来管理它，这在我看来是错误的。

<div class="buttonZone">
    <input type="radio" id="choice1" />
    <label for="choice1">Choice 1</label>
</div>
<div class="buttonZone">
    <input type="radio" id="choice2" />
    <label for="choice2">Choice 2</label>
</div>

如有任何想法，我们将不胜感激。

Answer 1

您可以将输入和标签文本包裹在 label 标签中（而不是让它们成为使用 for 属性链接的单独元素），整个区域都会触发输入。

.buttonZone {
  background: #eee;
  border: 1px solid #aaa;
  padding: 2em;
  display: inline-block;
}

<label class="buttonZone">
    <input type="radio" id="choice1" />
    <span>Choice 1</span>
</label>
<label class="buttonZone">
    <input type="radio" id="choice2" />
    <span>Choice 2</span>
</label>

Answer 2

你试过给按钮赋值吗？

<div class="buttonZone">
     <input type="radio" id="choice1" value="Choice 1" />
</div>
<div class="buttonZone">
     <input type="radio" id="choice2" value="Choice 2" />
</div>

用户友好的单选按钮点击检测

User friendly radio buttons click detection

html

javascript

css