2008-09-05 11 views
10

Für das folgende HTML:Mit JQuery, was ist der beste Weg, um Ereignislistener für Radiobuttons onclick zu setzen?

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

aus der folgenden JavaScript-Code ändern:

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

Dank

EDIT: Die Antwort, die ich Antworten auf die Frage habe ich gefragt, aber ich mag die Antwort das verwendet bind(), weil es auch zeigt, wie die Gruppe der Optionsfelder zu unterscheiden ist

Antwort

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

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

}); 

function fn() 
{ 
    //do stuff here 
} 
0

Ich denke, so etwas wie dies funktionieren sollte (aber es ist nicht getestet):

$("input[@type='radio']").each(function(i) { 
    if (this.val() == 'E') { 
     radioClicks(); 
     this.get().checked = true; 
    } 
} 
$("input[@type='radio']").click(radioClicks); 
0
$(function() { 
    $('#myForm :radio').each(function() { 
     if ($(this).value == 'S') { 
      $(this).attr("checked", true); 
      radioClicks(); 
     } 

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

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

Ich mag bind() verwenden, anstatt direkt die Verdrahtung der Event-Handler weil Sie Übergeben Sie zusätzliche Daten an den Event-Handler (hier nicht gezeigt, aber die Daten sind ein drittes bind() Argument), und weil Sie es leicht lösen können (und Sie können binden und lösen nach Gruppe - siehe JQuery d ocs).

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

Verwandte Themen