3.3.2 必学的单选按钮、复选框技术

虽然在语义上，<label>元素和<progress>元素、<meter>元素、<output>元素这三个元素有关联，但在行为上，却没有什么表现。

唯一有点反应的就是让<output>元素变成可输入元素后（例如设置contenteditable="true"），也是可以在<label>元素被点击后获得焦点的。不过很难想象会有什么场景需要让<output>元素变成可输入的，因此，对于这三个元素，<label>元素使用与否，意义不大，我们不用在意，不妨把注意力放在单选按钮和复选框这两个元素上，和<label>元素配合使用，可以迸发出强大的生命力。

例如如图3-30所示的支付金额选择效果，你会怎么实现？

试试使用<label>元素，可以无JavaScript实现我们所需要的交互效果，核心实现思路如下。

（1）将<label>元素作为点选的主体元素，内部放置隐藏的单选按钮元素，HTML代码示意如下：

此时，点击<label>元素会自动触发内部单选按钮元素的选中态。

（2）使用合适的CSS选择器匹配单选按钮的状态变化，并设置对应的CSS样式。例如使用：has()伪类：

于是，完整的交互效果就实现了，是非常健壮的实现。

上述效果你可以通过在浏览器中输入地址https://www.htmlapi.cn/3/3-2.html或扫码访问来体验。

如果不是想实现单选交互，而是要实现AB状态来回切换的交互效果，就像图3-31所示的开关，则可以使用<input epub:type="checkbox">复选框进行模拟，由于两种交互效果的实现原理一致，代码类似，这里就不重复展示了。