使用 jquery 在收音机上单击或更改事件
Posted
技术标签:
【中文标题】使用 jquery 在收音机上单击或更改事件【英文标题】：click or change event on radio using jquery 【发布时间】：2011-07-07 03:45:04 【问题描述】：我在我的页面上有一些无线电，我想在检查的无线电更改时做点什么，但代码不适用于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 中也不起作用。不知道为什么……
【问题讨论】：
您使用哪个版本的IE进行测试？您的代码在 IE8 中适用于我。你是对的，如果你点击一个选中的收音机，事件就会触发。为了避免这种情况，您需要检查您的代码。 它适用于我，检查以下jsfiddle.net/NerXh 【参考方案1】：这段代码对我有用：
$(function()
$('input:radio').change(function()
alert('changed');
);
);
http://jsfiddle.net/3q29L/
【讨论】：
当一个单选机被定位并且选择另一个单选机导致另一个单选机取消选择时，这对我不起作用。 除非在包含许多元素的页面上存在性能问题。在这种情况下，请改用$('input[type=radio]')（参见“附加说明”：api.jquery.com/radio-selector）【参考方案2】：
试试
$(document).ready(
而不是
$('document').ready(
或者你可以使用简写形式
$(function()
);
【讨论】：
【参考方案3】：您可以指定名称属性如下：
$( 'input[name="testGroup"]:radio' ).change(
【讨论】：
减少歧义。更好的练习。 +1【参考方案4】：也适用于我，这是一个更好的解决方案::
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>
您必须确保将jquery 初始化在所有其他导入和javascript 函数之上。因为$ 是一个jquery 函数。甚至
$(function()
<code>
);
不会检查jquery 是否初始化。它将确保 <code> 只有在所有 javascript 都初始化后才会运行。
【讨论】：
【参考方案5】：$( 'input[name="testGroup"]:radio' ).on('change', function(e)
console.log(e.type);
return false;
);这种语法在处理事件方面更灵活一些。您不仅可以观察到“变化”，还可以通过使用单个事件处理程序来控制其他类型的事件。您可以通过将事件列表作为参数传递给第一个参数来做到这一点。 See jQuery On
其次，.change() 是 .on( "change", handler ) 的快捷方式。 See here。我更喜欢使用 .on() 而不是 .change，因为我对事件有更多的控制权。
最后，我只是展示了一种将事件附加到元素的替代语法。
【讨论】：
这与 Iwao Nishida 的 answer 有什么不同？ 它不同，因为它不使用 .change() 但 .on() 没有理由不赞成这个答案。以上是关于使用 jquery 在收音机上单击或更改事件的主要内容，如果未能解决你的问题，请参考以下文章
为啥prop（）不会触发带有jquery的收音机的onchange事件[重复]
Javascript/jQuery 仅在浏览器后退/前进按钮单击时检测哈希更改