如何通过单击周围的填充来自动选择单选按钮

Question

我从这个问题中读到：属性标签标签可以与普通div关联吗？这是不可能给出DIV属性与输入中ID关联的。通常，如果我给出标签和ID，以便在用户单击标签中的文本时自动选择单个单选按钮。

假设我创建了一个带有许多广播按钮的表单，并且每个按钮都在跨度或DIV中，因此我可以潜入包装标签和广播按钮的边框，也请说我给我一个20px填充所有方向，如何使边界内的所有区域单击，因此它自动选择了与Div关联的单选按钮？

我在下面写了这本书，但刚刚发现DIV无法识别属性：

html

<div class="radio-btn" for="rdBanana"><input type="radio" name="fruit" value="banana" id="rdBanana"><label>Banana</label></div>
<div class="radio-btn" for="rdOrange"><input type="radio" name="fruit" value="orange" id="rdOrange"><label>Orange</label></div>
<div class="radio-btn" for="rdKiwi"><input type="radio" name="fruit" value="kiwi" id="rdKiwi"><label>Kiwi</label></div>

CSS

.radio-btn {
display: inline-block;
border: 1px solid black;
padding: 20px;
}

如何使所有填充可单击以自动选择单选按钮？

Answer 1

将按钮放在<label>中。

而不是<input type="radio"><label>Banana</label>，使用<label><input type="radio">Banana</label>。

<label>中的所有内容都将变得可单击并切换按钮。