[Javascript] 使用JQuery,設置單選按鈕的onclick事件監聽器的最佳方法是什麼?


Answers

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

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

我喜歡使用bind()而不是直接連接事件處理程序,因為您可以將其他數據傳遞給事件處理程序(此處未顯示,但數據是第三個bind()參數),並且可以輕鬆地解除綁定綁定和解除綁定 - 請參閱JQuery文檔)。

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

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()的答案,因為它還顯示如何區分單選按鈕組




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



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

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