En utilisant JQuery, quelle est la meilleure façon de définir les écouteurs d'événement onclick pour les boutons radio?

Question

Pour le code HTML suivant:

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

Modification du code javascript suivant:

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

Merci

EDIT: La réponse que je choisi répond à la question que je posais, mais j'aime la réponse qui utilise bind() car il montre également comment distinguer le groupe de boutons radio

Answer 1

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

Answer 2

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

Answer 3

$(function() { 

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

}); 

function fn() 
{ 
    //do stuff here 
} 

Answer 4

Je pense que quelque chose comme cela devrait fonctionner (mais il est non testé):

$("input[@type='radio']").each(function(i) { 
    if (this.val() == 'E') { 
     radioClicks(); 
     this.get().checked = true; 
    } 
} 
$("input[@type='radio']").click(radioClicks); 

Answer 5

$(function() { 
    $('#myForm :radio').each(function() { 
     if ($(this).value == 'S') { 
      $(this).attr("checked", true); 
      radioClicks(); 
     } 

     $(this).click(radioClicks); 
    }); 
}); 

Answer 6

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

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

J'aime utiliser bind() au lieu de câblage directement le gestionnaire d'événements parce que vous pouvez transmettre des données supplémentaires au gestionnaire d'événements (non représenté ici, mais les données sont un troisième argument bind()) et parce que vous pouvez facilement le désintéresser (et vous pouvez lier et dissocier par groupe - voir le JQuery d ocs).

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