引导影响单选按钮行为的 css

Bootstrap css affecting radio buttons behaviour

本文关键字：css 单选按钮 影响      更新时间：2023-09-26

我发现在引导中使用单选按钮时出现问题，并让javascript查询单选按钮的选择。问题是，当单选按钮选择更改时，与按钮关联的onclick事件会读取上一个选择，而不是当前选择。

这是我能够创建的 MWE(打开控制台以查看问题(：

https://jsbin.com/pasujeqeli/edit?html,output

单击"零"日志 True 到控制台。再次单击"零"会将 False 记录到控制台。实际上，控制台的日志现在只需单击一下单选按钮的实际状态。

我已经能够在没有bootstrap.css的情况下重新创建此错误，方法是单击与单选按钮相关的标签，而不是单击单选按钮本身。

似乎在单击标签时，在更新单选按钮之前调用了onclick方法。另一方面，单击单选按钮本身时，将在单选按钮更新后调用 onclick 方法。

我的问题是：如何更改 js 或 html 以确保我始终可以查询单选按钮的当前状态？

有一种简单有效的方法可以解决这个问题，方法是在每个输入的 onchange 事件下添加函数，如下所示

<label class="btn btn-primary active">
    <input type="radio" onchange="checkform()" name="number" checked="" id="one" value="One" >One
</label>

onchange事件将在单选按钮更改后触发，而不是像onclick事件发生的情况那样

相关文章：