11

重複の可能性：
選択解除中にJQuery $（＃radioButton）.change（…）が起動しない

私は次の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');
    }
});

rb2rb1を選択してラジオボタンの選択を解除すると、変更イベントは発生しません。どうしてこれなの？セレクターを変更して両方の入力に一致させてからIDを確認しなくても、これを機能させることはできますか？

フィドル： http： //jsfiddle.net/4uRWR/

4

4 に答える 4

12

変更イベントは、アイテム自体を実際に変更した場合にのみ送信されます。他のラジオをクリックしても、変更はしていません。修正は、すべてのinput：radioで変更イベントを監視し、関連するラジオボタンの状態を確認することです。

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

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

于 2013-01-15T22:22:33.637 に答える
7

ラジオのグループに関連するすべての入力の変更を聞いてから、特定のラジオが選択されているかどうかを確認します。

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

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

于 2013-01-15T22:22:48.620 に答える
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/

于 2013-01-15T23:41:31.877 に答える
0

数日前にこの問題に遭遇しました。ラジオ ボタンの個々のクリックをリッスンする代わりに、<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;
}
于 2013-01-15T22:29:25.523 に答える