为什么jquery不能检测未选中的单选按钮？

Question

可能是重复问题：
JQuery $(#radioButton).change(…) not firing during de-selection

我有以下的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');
    }
});

当我通过选择rb1取消选择rb2单选按钮时，不会触发change事件。为什么会这样？是否有可能在不更改选择器以匹配两个输入并查看ID的情况下使其工作？ 代码片段： http://jsfiddle.net/4uRWR/

- Abe Miessler

---

因为更改事件仅在选中单选框时触发，是吗？ - Fabrício Matté

似乎很奇怪它不关心取消选择。我的意思是...那不是一种变化吗？ - Abe Miessler

据我所知，这与W3C规范无关。我稍后会找到相关信息。 - Fabrício Matté

@ryanc1256 但他不是点击rb2，而是点击rb1。 - Kevin B

不用担心，@AlienHoboken已经回答了。但是再延伸一下，参考ref：当控件失去输入焦点并且其值自获取焦点以来已被修改时，会触发 onchange 事件。 对于此输入，由于失去了 checked 状态而没有获得焦点，因此不会触发更改事件。这是类型为文本的输入的标准行为，我不确定单选按钮是否也是如此，但这是浏览器实现的方式。 - Fabrício Matté

Answer 1

只有在实际修改项目时才会发送更改事件。当您单击其他单选按钮时，您并没有对其进行修改。一个解决方法是在每个input:radio上监视change事件，然后仅检查相关单选按钮的状态:

$("input:radio").change(function () {
if ($("#rb2").is(":checked")) {
             alert('checked');
    }
    else {
        alert('unchecked');
    }
});

http://codepen.io/AlienHoboken/pen/akwjB

- AlienHoboken

---

不改变我的选择器来匹配两个输入，并查看其ID，是否有可能让它正常工作？ - Kevin B

@KevinB：voila - Oleg

Answer 2

监控与您的一组单选按钮相关的每个输入更改，并检查是否选择了特定的单选按钮。

$("input[name=rb]").change(function () {
    if ($('#rb2').is(":checked")) {
        alert('checked');
    } else {
        alert('unchecked');
    }
});

http://jsfiddle.net/4uRWR/2/

- Robin Drexler

---

“是否有可能在不更改选择器以匹配两个输入，然后查看ID的情况下使其正常工作？” - Kevin B

当你有10个单选按钮时，这会变得相当笨重，而当按钮数量是动态的时，情况会更加复杂。 - Bob Ray

Answer 3

您可以人为触发同一组的单选按钮上的“更改”事件，以便原始绑定处理程序被捕获并输出“未选择”。技巧是通过递归重新触发事件来避免陷入无限循环，我们可以通过忽略缺少 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");
  }
});

在您的当前处理程序顶部添加此代码即可满足不更改选择器以匹配两个输入并查看ID标准的要求；）

http://jsfiddle.net/a73tn/24/

- Oleg

Answer 4

我几天前遇到了这个问题。我不是监听单个单选按钮的点击，而是监听包含它们的<ul>元素的点击事件，然后调用此函数来检查是否已选择其中一个。

// 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;
}

- Matt Whitehead