javascript 为什么 jquery 不检测何时取消选中单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14347952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't jquery detecting when a radio button is unchecked?
提问by Abe Miessler
Possible Duplicate:
JQuery $(#radioButton).change(…) not firing during de-selection
I have the following HTML/jQuery:
我有以下 HTML/jQuery：
<input id="rb1" type="radio" name="rb" checked="true">
<input id="rb2" type="radio" name="rb">
$("#rb2").change(function () {
if ($(this).is(":checked")) {
alert('checked');
}
else {
alert('unchecked');
}
});
When my rb2radio button is unselected by selecting rb1, the change event does not fire. Why is this? Is it possible to get this working without changing my selector to match both inputs and then looking at the ID?
当rb2通过选择 rb1 取消选择我的单选按钮时，不会触发更改事件。为什么是这样？是否可以在不更改我的选择器以匹配两个输入然后查看 ID 的情况下使其工作？
Fiddle: http://jsfiddle.net/4uRWR/
回答by AlienHoboken
The change event only gets sent when you actually modify the item itself. When you click the other radio, you aren't modifying it. A fix would be to watch the change event on every input:radio, then just check the state of the relevant radio button:
仅当您实际修改项目本身时才会发送更改事件。当您单击另一个收音机时，您并没有修改它。解决方法是观察每个 input:radio 上的更改事件，然后只需检查相关单选按钮的状态：
$("input:radio").change(function () {
if ($("#rb2").is(":checked")) {
alert('checked');
}
else {
alert('unchecked');
}
});
回答by Robin Drexler
Listen for change on every input related to your group of radios and then check if a specific one is selected.
聆听与您的收音机组相关的每个输入的变化，然后检查是否选择了特定的一个。
$("input[name=rb]").change(function () {
if ($('#rb2').is(":checked")) {
alert('checked');
} else {
alert('unchecked');
}
});
回答by o.v.
You can artificially trigger a "change" on radio buttons from the same group so that the original bound handler would get picked up and output "unchecked". The trick is to avoid being stuck in an infinite loop by recursively re-triggering the event, we can avoid that by ignoring artificial events that lack the originalEventproperty:
您可以人为地触发来自同一组的单选按钮的“更改”，以便原始绑定处理程序将被拾取并输出“未选中”。诀窍是通过递归重新触发事件来避免陷入无限循环，我们可以通过忽略缺乏originalEvent属性的人工事件来避免这种情况：
$("input[type=radio]").on("change", function (e) {
var $this = $(this);
//all inputs with the same name
var $targetInputSelector = $("input[name=" + $this.attr("name") + "]");
//check if the handler was fired "naturally"
//if yes, trigger the change handler "artificially" for inputs with the same name
if (e.hasOwnProperty('originalEvent')) {
//exclude the element that was changed "naturally"
//from the subset of all the elements with the same name
$targetInputSelector.not($this).triggerHandler("change");
}
});
This code works when added on top of your current handler and satisfies the without changing my selector to match both inputs and then looking at the IDcriteria ;)
此代码在添加到当前处理程序之上时有效，并且无需更改我的选择器以匹配两个输入，然后查看 ID条件即可满足；)
回答by Matt Whitehead
I sorta ran into this issue a few days ago. Instead of listening for an individual click on a radio button, I listen for a click on the <ul>I have them in and then call this function to check if one has been selected.
我几天前遇到了这个问题。我没有监听单选按钮上的单个单击，而是监听单击<ul>I have them in 然后调用此函数来检查是否已选择一个。
// Iterate over the radio group and determine if one of them is selected
function loopRadBtns(btnGroup)
{
var isChecked = false;
btnGroup.find('input[type="radio"]').each(function()
{
if($(this).attr('checked'))
{
isChecked = true;
}
});
return isChecked;
}
