Hộp kiểm Html thay đổi không hoạt động

Question

<input class="jProblemClass" id="Checkbox{%= ID %}" type="checkbox" onchange="problemPicker.onChangeProblemCheckBox('{%=ID %}');"/> 

Sau khi kiểm tra đầu tiên hoặc bỏ chọn không có gì xảy ra. Afetr nhấp chuột thứ hai, gọi chức năng của tôi problemPicker.onChangeProblemCheckBox, nhưng tôi nhận được ID kiểm tra đầu tiên. Tại sao? Có thể giúp tôi bất cứ ai?

onChangeProblemCheckBox: function(id) { 
    if ($('#CheckBox' + id).attr("checked") == true) { 
     problemPicker.addToCheckProblems(id); 

     var checkboxes = $('.jProblemClass:checked'); 

     if ((checkboxes.length > general.limit) && (general.limit != 0)) { 
      alert('The limit of ' + general.limit + ' problems exceeded. Please deselect ' + (checkboxes.length - general.limit).toString() + '.'); 
     } 
    } else { 
     problemPicker.delFromCheckProblems(id); 
    } 
}, 

Answer 1

Bro sử dụng sự kiện onclick thay onchange .. Lý do ... Theo tài liệu tham khảo Javascript Tôi đã đọc, onchange cháy sau khi focus sẽ bị mất. Trừ khi bạn nhấp vào một nơi khác, tiêu điểm không bị mất trong IE. Các trình duyệt khác không được chờ tiêu điểm bị mất trước khi kích hoạt chế độ kích hoạt - điều này cho thấy chúng không tuân theo thông số kỹ thuật chính xác (mặc dù điều đó có ý nghĩa hơn khi kích hoạt tại điểm đó). Thay vào đó, hãy sử dụng onclick và onkeydown/onkeyup (bằng cách sử dụng cả onclick và onkeyup/onkeydown, bạn sẽ bao gồm cả cài đặt chuột và bàn phím của hộp kiểm ). REFERENCE: http://www.winvistatips.com/re-onchange-event-checkbox-not-working-properly-t311364.html

Answer 2

Tôi nghĩ, sự cố xảy ra ở đây: $('#CheckBox' + id).attr("checked") == true. Theo đó, thông số kỹ thuật HTML, checked phải được đặt thành "checked" khi sự kiện này kích hoạt. Vì vậy, hãy thử sử dụng một cái gì đó như $('#CheckBox' + id).attr("checked") == "checked" hoặc thậm chí $('#CheckBox' + id).attr("checked").

Là tùy chọn thứ hai, tôi khuyên bạn nên sử dụng jquery tinh khiết để chạy thường trình của bạn. Ví dụ, nếu bạn có <input type="checkbox" id="ac"> hộp, bạn có thể sử dụng mã JQ này để xử lý thói quen của bạn:

$(document).ready(function() { 
    $("input[type=checkbox]").change(function() { 
     alert("Am i checked? - " + $(this).attr("checked") + "\nMy ID:" + $(this).attr("id")); 
    }); 
}); 

Trường hợp này được thể hiện trong this demo.

Answer 3

Hãy thử sử dụng if($('#CheckBox' + id + ':checked').length > 0) thay vào đó, cách đó bạn đã dẫn jQuery tìm ra hộp kiểm là checked hay không.

Ngoài ra nếu onChangeProblemCheckBox sử dụng bất kỳ thuộc tính nội bộ trong problemPicker nhưng không referens chúng với đường dẫn đầy đủ, ví dụ: problemPicker.nnnnn nó sẽ thất bại như sự kiện sẽ cháy trong bối cảnh các yếu tố, không problemPicker. Nó sẽ giống như chức năng được gọi như thế này $('#CheckBox' + id).onChangeProblemCheckBox().