使用jQuery点击或更改单选按钮事件

Question

使用jQuery点击或更改单选按钮事件

88

我页面上有一些单选框，当选中的单选框发生变化时，我想要执行一些操作。然而在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中也不起作用。我不知道为什么......

- hguser

1

你在测试中使用的是哪个版本的IE浏览器？你的代码在我的IE8上可以运行。你说得对，如果你点击一个已选中的单选按钮，事件将会被触发。为了避免这种情况，你需要在你的代码中进行检查。 - kgiannakakis

它对我有效，检查以下链接 http://jsfiddle.net/NerXh/ - Furqan Hameedi

5个回答

72

您可以按照以下方式指定name属性：

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

- Iwao Nishida

8

减少歧义。做法更好。+1 - Bryan Austin

16

我也试过了，这里有一个更好的解决方案：

演示

<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>

您必须确保先于所有其他导入和JavaScript函数初始化jquery，因为$是jquery函数。

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

不会检查 jquery 是否初始化，但它确保只有在所有JavaScript被初始化后才运行<code>。

- suhailvs

7

尝试

$(document).ready(

替代

$('document').ready(

或者您可以使用一种简写形式。

$(function(){
});

- rahul

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

这个有什么有效的区别，和Iwao Nishida的回答有什么不同吗？ - Uyghur Lives Matter

它不使用.change()，而是使用.on()，因此不同。没有理由对此答案进行负投票。 - Luis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alexl · Accepted Answer

这段代码对我起作用：

$(function(){

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

});

http://jsfiddle.net/3q29L/