使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?
Posted
技术标签:
【中文标题】使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?【英文标题】:Using jQuery, what is the best way to set onClick event listeners for radio buttons?使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是什么? 【发布时间】:2010-09-07 23:36:38 【问题描述】:对于以下 html:
<form name="myForm">
<label>One<input name="area" type="radio" value="S" /></label>
<label>Two<input name="area" type="radio" value="R" /></label>
<label>Three<input name="area" type="radio" value="O" /></label>
<label>Four<input name="area" type="radio" value="U" /></label>
</form>
从以下 javascript 代码更改:
$(function()
var myForm = document.myForm;
var radios = myForm.area;
// Loop through radio buttons
for (var i=0; i<radios.length; i++)
if (radios[i].value == "S")
radios[i].checked = true; // Selected when form displays
radioClicks(); // Execute the function, initial setup
radios[i].onclick = radioClicks; // Assign to run when clicked
);
谢谢
编辑:我选择的答案回答了我提出的问题,但是我喜欢使用 bind()
的答案,因为它还显示了如何区分单选按钮组
【问题讨论】:
【参考方案1】:$(document).ready(function()
$("input[name='area']").bind("click", radioClicks);
);
functionradioClicks()
alert($(this).val());
我喜欢使用bind()
而不是直接连接事件处理程序,因为您可以将其他数据传递给事件处理程序(此处未显示,但数据是第三个 bind() 参数)并且您可以轻松取消绑定它(并且您可以按组绑定和取消绑定——请参阅 jQuery 文档)。
http://docs.jquery.com/Events/bind#typedatafn
【讨论】:
【参考方案2】:$( function()
$("input:radio")
.click(radioClicks)
.filter("[value='S']")
.attr("checked", "checked");
);
【讨论】:
【参考方案3】:$(function()
$("form#myForm input[type='radio']").click( fn );
);
function fn()
//do stuff here
【讨论】:
【参考方案4】:$(function()
$('input[@type="radio"]').click(radioClicks);
);
【讨论】:
【参考方案5】:我认为这样的事情应该可以工作(但未经测试):
$("input[@type='radio']").each(function(i)
if (this.val() == 'E')
radioClicks();
this.get().checked = true;
$("input[@type='radio']").click(radioClicks);
【讨论】:
【参考方案6】:$(function()
$('#myForm :radio').each(function()
if ($(this).value == 'S')
$(this).attr("checked", true);
radioClicks();
$(this).click(radioClicks);
);
);
【讨论】:
以上是关于使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据