web-dev-qa-db-ja.com

jqueryを使用してラジオのイベントをクリックまたは変更する

私のページにはいくつかのラジオがあり、チェックされたラジオが変更されたときに何かをしたいのですが、コードはIEで動作しません：

$('input:radio').change(...);

そしてグーグルの後、人々はclickを代わりに使用することを提案します。しかし、それは機能しません。

これはサンプルコードです：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('document').ready(
                function(){
                    $('input:radio').click(
                        function(){
                            alert('changed');   
                        }
                    );  
                }
            );

        </script>
    </head>
    <body>
        <input type="radio" name="testGroup" id="test1" />test1<br/>
        <input type="radio" name="testGroup" id="test2" />test2<br/>
        <input type="radio" name="testGroup" id="test3" />test3</br>
    </body>
</html>

IEでは動作しません。

だから私は何が起こっているのか知りたいですか？

また、チェックされたラジオをクリックすると変更イベントが再トリガーされるのではないかと心配しています。

更新：

コメントを追加できないので、ここで返信します。

私はIE8を使用していますが、Furqanが提供するリンクもIE8では機能しません。何故かはわからない...

jqueryradio-button
84
hguser

このコードは私のために働いた：

$(function(){

    $('input:radio').change(function(){
        alert('changed');   
    });          

});

http://jsfiddle.net/3q29L/

111
alexl

次のように名前属性を指定できます。

$( 'input[name="testGroup"]:radio' ).change(
71
Iwao Nishida

私にとってもうまくいきます、これはより良い解決策です::

フィドルデモ

<form id="myForm">
  <input type="radio" name="radioName" value="1" />one<br />
  <input type="radio" name="radioName" value="2" />two 
</form>

<script>
$('#myForm input[type=radio]').change(function() {       
    alert(this.value);
});
</script>

jqueryを他のすべてのインポートおよびjavascript関数よりも上に初期化したことを確認する必要があります。 $はjquery関数であるためです。でも

$(function(){
 <code>
});

jqueryが初期化されているかどうかはチェックしません。すべてのjavascriptが初期化された後にのみ<code>が実行されるようにします。

13
suhailvs

試して

$(document).ready(

の代わりに

$('document').ready(

または、速記フォームを使用できます

$(function(){
});
7
rahul
$( 'input[name="testGroup"]:radio' ).on('change', function(e) {
     console.log(e.type);
     return false;
});

この構文は、イベントを処理するためにもう少し柔軟です。 「変更」を観察できるだけでなく、1つのイベントハンドラーを使用して、他の種類のイベントもここで制御できます。これを行うには、最初のパラメーターの引数としてイベントのリストを渡します。 jQuery Onを参照

次に、.change（）は.on（ "change"、handler）のショートカットです。 こちらを参照 。イベントをより詳細に制御できるため、.changeよりも.on（）を使用することを好みます。

最後に、イベントを要素にアタッチする代替構文を単に示しています。

0
Carlos Augusto