2008-09-05 17 views
10

Na poniższym HTML:Korzystając z JQuery, jaki jest najlepszy sposób ustawiania detektorów zdarzeń onclick dla przycisków radiowych?

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

Zmiana z następującego kodu 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 
    } 
}); 

Dzięki

EDIT: Odpowiedź Wybrałem odpowiada na pytanie poprosiłem jednak lubię odpowiedź używający funkcji bind(), ponieważ pokazuje również, jak odróżnić grupę przycisków radiowych:

Odpowiedz

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

Myślę, że coś jak to powinno działać (ale to niesprawdzone):

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

Lubię używać bind() zamiast bezpośredniego okablowania obsługi zdarzeń, ponieważ można przekazuje dodatkowe dane do handlarza zdarzeń (nie pokazano tutaj, ale dane są trzecim argumentem bind()) i ponieważ możesz je łatwo odłączyć (i możesz wiązać i usuwać powiązania według grup - zobacz JQuery d ocs).

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

Powiązane problemy