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>

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

2 个答案: