使用 jquery 单击或更改收音机上的事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5165862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 18:39:50  来源:igfitidea点击:

click or change event on radio using jquery

jqueryradio-button

提问by hguser

I have some radios in my page,and I want to do something when the checked radio changes,however the code does not work in IE:

我的页面中有一些收音机,我想在选中的收音机更改时做一些事情,但是代码在 IE 中不起作用:

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

And after googling,people suggest use the clickinstead. But it does not work.

谷歌搜索后,人们建议使用点击代替。但它不起作用。

This is the example code:

这是示例代码:

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

It also does not work in IE.

它也不适用于 IE。

So I want to know what is going on?

所以我想知道这是怎么回事?

Also I am afraid if it will retrigger the change event if I click a checked radio?

另外,如果我单击选中的收音机,它是否会重新触发更改事件?

UPDATE:

更新:

I can not add comment,so I reply here.

我无法添加评论,所以我在这里回复。

I use IE8 and the link Furqan give me also does not work in IE8. I do not know why...

我使用 IE8,而 Furqan 给我的链接在 IE8 中也不起作用。我不知道为什么...

回答by alexl

This code worked for me:

这段代码对我有用:

$(function(){

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

});

http://jsfiddle.net/3q29L/

http://jsfiddle.net/3q29L/

回答by Iwao Nishida

You can specify the name attribute as below:

您可以指定 name 属性如下:

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

回答by suhailvs

Works for me too, here is a better solution::

也适用于我,这是一个更好的解决方案:

fiddle demo

小提琴演示

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

You must make sure that you initialized jqueryabove all other imports and javascript functions. Because $is a jqueryfunction. Even

您必须确保jquery在所有其他导入和 javascript 函数之前进行初始化。因为$jquery函数。甚至

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

will not check jqueryinitialised or not. It will ensure that <code>will run only after all the javascripts are initialized.

不会检查是否jquery初始化。它将确保<code>仅在所有 javascript 初始化后运行。

回答by rahul

Try

尝试

$(document).ready(

instead of

代替

$('document').ready(

or you can use a shorthand form

或者您可以使用速记形式

$(function(){
});

回答by Carlos Augusto

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

This syntax is a little more flexible to handle events. Not only can you observe "changes", but also other types of events can be controlled here too by using one single event handler. You can do this by passing the list of events as arguments to the first parameter. See jQuery On

这种语法在处理事件时更灵活一些。您不仅可以观察“变化”,还可以通过使用单个事件处理程序在这里控制其他类型的事件。您可以通过将事件列表作为参数传递给第一个参数来做到这一点。参见 jQuery

Secondly, .change() is a shortcut for .on( "change", handler ). See here. I prefer using .on() rather than .change because I have more control over the events.

其次, .change() 是 .on( "change", handler ) 的快捷方式。见这里。我更喜欢使用 .on() 而不是 .change 因为我可以更好地控制事件。

Lastly, I'm simply showing an alternative syntax to attach the event to the element.

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