如何通过单击 Blazor 中的 div 来选择单选按钮？

Question

在我的项目中，我有几个单选按钮组，其中附加了一些额外的信息，如下所示：

    <div>
        <div class="option">
            <input type="radio" name="Letters" value="a" />
            <a>Letter A</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="option">
            <input type="radio" name="Letters" value="b" />
            <a>B</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="option">
            <input type="radio" name="Letters" value="c" />
            <a>C</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="option">
            <input type="radio" name="Letters" value="d" />
            <a>D</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

如果我单击单选按钮点，它就可以工作，但我希望能够单击父 div 并更改值。我读到这可以通过父 div 上的

@onchanged

来完成，但我只遇到过如何做到这一点的 JS 片段。

我该怎么做？

Answer 1

您可以使用

<label>

元素而不是

<div>

元素将单击事件传播到输入。无需代码！

<label class="option">
    <input type="radio" name="Letters" value="c" />
    <a>C</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</label>

工作演示：

https://blazorfiddle.com/s/sr414t1n

注意：我在

.option

类中添加了一些 CSS，以将标签呈现为块元素。悬停样式只是为了显示单击何时会对

<label>

元素产生影响。

.option {
  display: block;
}
.option:hover {
  background-color: #ccc;
  cursor: pointer;
}