javascript - 复选框单选按钮行为

Question

我正在尝试将 Bootstrap 主题实现为 OpenLayers Layer Switcher 控件的新样式。
在 Bootstrap 示例中，我注意到 input 元素嵌套在 label 元素中，如下所示:

<label class="radio span2">
    <input type="radio" value="option1">
    Cash
</label>
<label class="radio span2">
    <input type="radio" value="option2">
    Invoice
</label>
<label class="radio span2">
    <input type="radio" value="option3">
    Discover
</label>

似乎当您单击单选按钮的标签时，它会被选中但不会被触发。但是当您点击 radio 本身时，它确实会被触发。 复选框也会发生同样的情况。但是即使复选框被选中，这次也不会触发点击事件。

您可以查看代码here

我该如何解决这个问题？

Answer 1

您已经为控件注册了一个click事件处理程序。如果您不单击控件，则不会调用处理程序。

当标签与元素关联时，单击它就会“激活”该元素。如果是复选框或单选按钮，这意味着选中/选中它。

复选框也可以通过其他方式更改，例如键盘。因此，click 事件处理程序并不是最佳选择。请改用 change 事件。