使用jQuery单击或更改广播上的事件

86

我有我的网页一些电台，我想要做的事。当检查的无线电变化，但是代码不会在IE浏览器：

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

谷歌搜索后，人们建议改用点击。但这行不通。

这是示例代码：

<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中也不起作用。我不知道为什么...

jquery radio-button

— hguser
source

1

您正在使用哪个版本的IE进行测试？您的代码在IE8中对我有用。没错，如果您单击选中的收音机，事件将触发。为了避免这种情况，您需要在代码中执行检查。

— kgiannakakis 2011年

它对我有用

— Furqan Hameedi 2011年

111

这段代码对我有用：

$(function(){

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

});

http://jsfiddle.net/3q29L/

— 亚历克斯
source

4

当以单个无线电为目标并且选择另一个无线电导致另一个无线电取消选择时，这对我不起作用。

— Doug Amos

1

除非性能是包含多个元素的页面上的问题。在这种情况下，$('input[type=radio]')请改用（请参阅“其他说明”：api.jquery.com/radio-selector）

— jemmons 2013年

72

您可以如下指定name属性：

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

— 西田岩男
source

8

减少歧义。更好的做法。+1

— Jacks_Gulch

14

我也可以使用，这是一个更好的解决方案：

小提琴演示

<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初始化。它将确保<code>仅在所有JavaScript初始化后才能运行。

— 苏海尔斯
source

7

尝试

$(document).ready(

代替

$('document').ready(

或者您可以使用简写形式

$(function(){
});

— 拉胡尔
source

1

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

展开摘要

这种语法在处理事件方面更加灵活。您不仅可以观察到“变化”，而且还可以通过使用一个事件处理程序来控制其他类型的事件。您可以通过将事件列表作为参数传递给第一个参数来实现。参见jQuery On

其次，.change（）是.on（“ change”，handler）的快捷方式。看这里。我更喜欢使用.on（）而不是.change，因为我对事件有更多的控制权。

最后，我只是展示了将事件附加到元素的另一种语法。

— 卡洛斯·奥古斯托（Carlos Augusto）
source

这与西田岩雄的回答有什么不同？

— 所有工人都是必不可少的

这是不同的，因为它不使用.change（）而是.on（）没有理由拒绝这个答案。

— luis