单选按钮组 - 按钮的更改事件被取消选择?
假设我有一组两个单选按钮:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
似乎单击第二个按钮只会触发该按钮上的事件处理程序。但是,第一个按钮确实被取消选择,并且视觉上确实发生了变化。任何人都可以验证事件是否仅在选定的按钮上触发,而不是组中因单击而取消选择的任何其他按钮?有什么聪明的方法可以观察取消选择事件的单选按钮吗?
Let's say I have a group of two radio buttons:
<input type="radio" name="radioButtonGroup" value="button1" checked="true"/>
<input type="radio" name="radioButtonGroup" value="button2"/>
It seems that clicking the second button triggers an event handler on that button only. However, the first button does become deselected, and visually does change. Can anyone verify that events are fired only on the button that was selected, and not any of the other buttons in the group which become deselected as a result of the click? Any clever ways to watch a radio button for a deselecting event?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
虽然无法确认,但事件变更触发不会在整个组中发生。
如果您希望发生这种情况,您可以使用各种 JS 库(如 jQuery、YUI 等)甚至纯 JavaScript 来实现,如下所示:
可以在 onClick 或 onChange 事件上调用此函数。
我希望这能解决你的问题。
Although it cannot be confirmed, but the event change triggers don't happen on the entire group.
If you want that to happen, you can do it using various JS libraries like jQuery, YUI, etc. or even plain javascript, as follows:
This function can be called on the onClick or the onChange event.
I hope that solves your problem.
首先,需要注意的是,在更新“checked”值后,任何无线电上的“Click”事件都会触发。这很重要 - 因为这意味着一旦事件已经触发,您就无法检测到前一个项目。如果您取消该事件,您实际上是将值更改回原值 - 最初并不是停止它。这对于您如何解决问题很重要。
示例:
因此,最简单的解决方案是在事件处理程序旁边跟踪闭包中的“最后一个”选定项,如下所示:
有关工作示例,请参阅:
http://jsfiddle.net/TroyAlford/wvrtC/
Firstly, it is important to note that a "Click" event on any of the radios fires AFTER the "checked" value is already updated. This is important - because it means you can't detect the previous item once the event is already fired. If you Cancel the event, you are actually changing the value BACK - not stopping it initially. This is important to how you approach the problem.
Example:
Because of this, the easiest solution is to track the "last" selected item in a closure alongside your event handlers, as follows:
For a working example, see:
http://jsfiddle.net/TroyAlford/wvrtC/
我无法确认仅针对选定的按钮触发事件,但如果您需要对刚刚取消选择的按钮执行某些操作,则以下操作将起作用:
在操作中 此处。
如果您需要跟踪多组单选按钮,您可以使用当前选定的按钮数组来实现,并在检测到更改时在该数组中进行匹配。
I can't confirm that an event is only fired for the selected button, but if you needed to do something with the button that was just deselected, the following would work:
In action here.
If you need to keep track of multiple groups of radio buttons, you could do it with an array of currently selected buttons and match within that array when a change is detected.
单选按钮集的简单性在于一次只能选择一个按钮。自动选择一个按钮意味着其他按钮没有被选择,但没有取消选择的具体操作。因此,您只需要担心一个事件,因为它会同时影响该组中的所有按钮。
如果您想使用允许多项选择的元素,请尝试复选框。
The simple nature of the radio button set is that only one button can be selected at a time. Selecting a button automatically means the others are not selected, but there is no specific action for deselecting. Therefore, you only need to worry about the one event, because it affects all the buttons in the set at one time.
If you would like to use an element that allows for multiple selections try checkboxes.