باستخدام jQuery، ما هي أفضل طريقة لتعيين مستمعي الأحداث onClick لأزرار الاختيار؟

Question

بالنسبة لـ 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() لأنها توضح أيضًا كيفية التمييز بين مجموعة أزرار الاختيار

Answer 1

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

Answer 2

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

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

أحب أن استخدم bind() بدلاً من توصيل معالج الحدث مباشرةً لأنه يمكنك تمرير بيانات إضافية إلى معالج الحدث (لا يظهر هنا ولكن البيانات عبارة عن وسيطة ربط ثالثة () ولأنه يمكنك إلغاء ربطها بسهولة (ويمكنك ربطها وإلغاء ربطها بواسطة المجموعة-- راجع مستندات jQuery).

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

Answer 3

$(function() {

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

});

function fn()
{
   //do stuff here
}

Answer 4

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

Answer 5

أعتقد أن شيئًا كهذا يجب أن يعمل (ولكن لم يتم اختباره):

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

Answer 6

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

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