2008-09-05 10 views
10

JQueryを使用して、onclickイベントリスナーにラジオボタンを設定する最も良い方法は何ですか?

<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()を使用します。

答えて

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

私はこのような何かが動作するはずだと思う(しかし、それは未テストです):

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

私はあなたができるので、直接イベントハンドラを配線するのではなく、bind()を使用したいです追加データをイベントハンドラに渡します(ここでは表示されませんが、データは3番目のbind()引数です)。また、簡単にバインドを解除できるため(グループごとにバインドまたはアンバインドすることもできます) ocs)。

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

関連する問題