使用JQuery,为单选按钮设置onclick事件侦听器的最佳方法是什么?
时间:2020-03-05 18:48:29 来源:igfitidea点击:
对于以下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()的回答,因为它还显示了如何区分单选按钮组
解决方案
回答
$(function() { $('input[@type="radio"]').click(radioClicks); });
回答
$(function() { $("form#myForm input[type='radio']").click( fn ); }); function fn() { //do stuff here }
回答
我认为类似这样的方法应该可以工作(但未经测试):
$("input[@type='radio']").each(function(i) { if (this.val() == 'E') { radioClicks(); this.get().checked = true; } } $("input[@type='radio']").click(radioClicks);
回答
$(function() { $('#myForm :radio').each(function() { if ($(this).value == 'S') { $(this).attr("checked", true); radioClicks(); } $(this).click(radioClicks); }); });
回答
$( function() { $("input:radio") .click(radioClicks) .filter("[value='S']") .attr("checked", "checked"); });
回答
$(document).ready(function(){ $("input[name='area']").bind("click", radioClicks); }); functionradioClicks() { alert($(this).val()); }
我喜欢使用bind()
而不是直接连接事件处理程序,因为我们可以将其他数据传递给事件处理程序(此处未显示,但数据是第三个bind()参数),并且因为我们可以轻松地解除绑定(和我们可以按组绑定和取消绑定-请参见JQuery文档)。
http://docs.jquery.com/Events/bind#typedatafn