为什么在取消选中单选按钮时jquery无法检测到? [重复]

时间:2021-04-30 14:22:07

Possible Duplicate:
JQuery $(#radioButton).change(…) not firing during de-selection

可能重复:JQuery $(#radioButton).change(...)在取消选择期间不会触发

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 rb2 radio 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?

当通过选择rb1取消选择我的rb2单选按钮时,更改事件不会触发。为什么是这样?是否可以在不更改我的选择器以匹配两个输入然后查看ID的情况下使其正常工作?

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

小提琴:http://jsfiddle.net/4uRWR/

4 个解决方案

#1


12  

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:

只有在您实际修改项目本身时才会发送更改事件。单击其他收音机时,您不会对其进行修改。修复方法是在每个输入上观察更改事件:radio,然后只检查相关单选按钮的状态:

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

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

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

#2


7  

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');
    }
});

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

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

#3


1  

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 originalEvent property:

您可以人为地触发来自同一组的单选按钮的“更改”,以便拾取原始绑定处理程序并输出“未选中”。诀窍是通过递归重新触发事件来避免陷入无限循环,我们可以通过忽略缺少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 ID criteria ;)

此代码在添加到当前处理程序之后工作,并且满足不更改我的选择器以匹配两个输入,然后查看ID条件;)

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

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

#4


0  

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.

我几天前遇到了这个问题。我没有听单独点击单选按钮,而是单击

    我将它们放入,然后调用此函数来检查是否已选择了一个。

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

#1


12  

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:

只有在您实际修改项目本身时才会发送更改事件。单击其他收音机时,您不会对其进行修改。修复方法是在每个输入上观察更改事件:radio,然后只检查相关单选按钮的状态:

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

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

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

#2


7  

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');
    }
});

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

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

#3


1  

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 originalEvent property:

您可以人为地触发来自同一组的单选按钮的“更改”,以便拾取原始绑定处理程序并输出“未选中”。诀窍是通过递归重新触发事件来避免陷入无限循环,我们可以通过忽略缺少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 ID criteria ;)

此代码在添加到当前处理程序之后工作,并且满足不更改我的选择器以匹配两个输入,然后查看ID条件;)

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

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

#4


0  

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.

我几天前遇到了这个问题。我没有听单独点击单选按钮,而是单击

    我将它们放入,然后调用此函数来检查是否已选择了一个。

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