使用JQuery，为单选按钮设置onclick事件监听器的最佳方法是什么?

For the following HTML:

下面的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>

Changing from the following javascript code:

改变如下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
     }  
 });

Thanks

谢谢

EDIT: The response I selected answers the question I asked, however I like the answer that uses bind() because it also shows how to distinguish the group of radio buttons

编辑:我选择的响应回答了我的问题，但是我喜欢使用bind()的答案，因为它还显示了如何区分单选按钮组

6 个解决方案

#1

$( function() {
    $("input:radio")
        .click(radioClicks)
        .filter("[value='S']")
        .attr("checked", "checked");
});

#2

$(document).ready(function(){
    $("input[name='area']").bind("click", radioClicks);
});

functionradioClicks() {
    alert($(this).val());
}

I like to use bind() instead of directly wiring the event handler because you can pass additional data to the event hander (not shown here but the data is a third bind() argument) and because you can easily unbind it (and you can bind and unbind by group--see the JQuery docs).

我喜欢使用bind()而不是直接连接事件处理程序,因为你可以将额外的数据传递给事件夹头(这里没有显示,但数据是第三个bind()的参数),因为你可以很容易地解开它(你可以绑定和解放集团——见JQuery文档)。

http://docs.jquery.com/Events/bind#typedatafn

http://docs.jquery.com/Events/bind typedatafn

#3

$(function() {

  $("form#myForm input[type='radio']").click( fn );

});

function fn()
{
   //do stuff here
}

#4

$(function() {
    $('input[@type="radio"]').click(radioClicks);
});

#5

I think something like this should work (but it's untested):

我认为这样的东西应该有用(但还没有经过测试):

$("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);
    });
});

#1

$( function() {
    $("input:radio")
        .click(radioClicks)
        .filter("[value='S']")
        .attr("checked", "checked");
});

#2

$(document).ready(function(){
    $("input[name='area']").bind("click", radioClicks);
});

functionradioClicks() {
    alert($(this).val());
}