Xử lý sự kiện hộp kiểm jQuery

Tôi có những điều sau đây:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Làm cách nào để sử dụng jQuery để ghi lại bất kỳ sự kiện kiểm tra nào xảy ra myformvà cho biết hộp kiểm nào đã được bật (và biết nếu nó được bật hay tắt)?

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

Sử dụng sự kiện thay đổi.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Có một số câu trả lời hữu ích, nhưng dường như không có câu trả lời nào bao gồm tất cả các tùy chọn mới nhất . Cuối cùng, tất cả các ví dụ của tôi cũng phục vụ cho sự hiện diện của labelcác yếu tố phù hợp và cũng cho phép bạn tự động thêm các hộp kiểm và xem kết quả trong bảng điều khiển bên (bằng cách chuyển hướng console.log).

• Lắng nghe cho clickcác sự kiện trên checkboxeslà không một ý tưởng tốt như rằng sẽ không cho phép bàn phím toggling hoặc thay đổi được thực nơi một kết hợp labelyếu tố được nhấp. Luôn luôn lắng nghe changesự kiện.

• Sử dụng :checkboxbộ chọn giả jQuery , chứ không phải input[type=checkbox]. :checkboxngắn hơn và dễ đọc hơn.

• Sử dụng is()với :checkedbộ chọn giả jQuery để kiểm tra xem hộp kiểm có được chọn hay không. Điều này được đảm bảo để làm việc trên tất cả các trình duyệt.

Trình xử lý sự kiện cơ bản gắn liền với các yếu tố hiện có:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

Mã nguồn: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Ghi chú:

• Sử dụng :checkboxbộ chọn, thích hợp hơn để sử dụnginput[type=checkbox]
• Điều này chỉ kết nối với các yếu tố phù hợp tồn tại tại thời điểm sự kiện được đăng ký.

Trình xử lý sự kiện được ủy quyền gắn với phần tử tổ tiên:

Trình xử lý sự kiện được ủy nhiệm được thiết kế cho các tình huống mà các phần tử có thể chưa tồn tại (được tải hoặc tạo động) và rất hữu ích. Họ ủy thác trách nhiệm cho một yếu tố tổ tiên (do đó là thuật ngữ).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Ghi chú:

• Điều này hoạt động bằng cách lắng nghe các sự kiện (trong trường hợp này change) để tạo ra một yếu tố tổ tiên không thay đổi (trong trường hợp này #myform).
• Sau đó, nó áp dụng bộ chọn jQuery ( ':checkbox'trong trường hợp này) chỉ cho các phần tử trong chuỗi bong bóng .
• Sau đó, nó áp dụng chức năng xử lý sự kiện cho chỉ những phần tử phù hợp gây ra sự kiện.
• Sử dụng documentlàm mặc định để kết nối trình xử lý sự kiện được ủy quyền, nếu không có gì khác gần hơn / thuận tiện.
• Không sử dụng bodyđể đính kèm các sự kiện được ủy quyền vì nó có một lỗi (liên quan đến kiểu dáng) có thể ngăn nó nhận các sự kiện chuột.

Kết quả cuối cùng của các trình xử lý được ủy quyền là các phần tử khớp chỉ cần tồn tại tại thời điểm sự kiện chứ không phải khi trình xử lý sự kiện được đăng ký. Điều này cho phép nội dung được thêm động để tạo các sự kiện.

Q: Có chậm hơn không?

Trả lời: Miễn là các sự kiện ở tốc độ tương tác người dùng, bạn không cần phải lo lắng về sự khác biệt không đáng kể về tốc độ giữa trình xử lý sự kiện được ủy quyền và trình xử lý được kết nối trực tiếp. Những lợi ích của phái đoàn vượt xa bất kỳ nhược điểm nhỏ. Trình xử lý sự kiện được ủy nhiệm thực sự nhanh hơn để đăng ký vì chúng thường kết nối với một yếu tố phù hợp duy nhất.

Tại sao không prop('checked', true)bắn các changesự kiện?

Điều này thực sự là do thiết kế. Nếu nó phát sinh sự kiện, bạn sẽ dễ dàng rơi vào tình huống cập nhật vô tận. Thay vào đó, sau khi thay đổi thuộc tính được kiểm tra, hãy gửi một sự kiện thay đổi đến cùng một phần tử bằng cách sử dụng trigger(không triggerHandler):

ví dụ như không triggercó sự kiện nào xảy ra

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

ví dụ với triggersự kiện thay đổi bình thường bị bắt

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Ghi chú:

• Không sử dụng triggerHandlernhư được đề xuất bởi một người dùng, vì nó sẽ không tạo ra các sự kiện cho người xử lý sự kiện được ủy quyền .

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

mặc dù nó sẽ hoạt động cho một trình xử lý sự kiện được kết nối trực tiếp với phần tử:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Các sự kiện được kích hoạt bằng .triggerHandler () không tạo ra cấu trúc phân cấp DOM; nếu chúng không được xử lý trực tiếp bởi phần tử đích, chúng không làm gì cả.

Tham khảo: http://api.jquery.com/triggerhandler/

Nếu bất cứ ai có các tính năng bổ sung mà họ cảm thấy không được bảo vệ bởi điều này, xin vui lòng đề xuất bổ sung .

Sử dụng phương thức 'bật' mới trong jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• người xử lý sự kiện sẽ sống
• sẽ chụp nếu hộp kiểm được thay đổi bằng bàn phím, không chỉ nhấp

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

Thừa nhận thực tế rằng người hỏi yêu cầu cụ thể jQuery và câu trả lời được chọn là chính xác, cần lưu ý rằng vấn đề này không thực sự cần jQuery mỗi lần nói. Nếu một người mong muốn giải quyết vấn đề này mà không có nó, người ta có thể chỉ cần đặt onClickthuộc tính của các hộp kiểm mà họ muốn thêm chức năng bổ sung vào, như vậy:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Câu đố: http://jsfiddle.net/Y9f66/1/

Tôi đã thử mã từ câu trả lời đầu tiên, nó không hoạt động nhưng tôi đã chơi xung quanh và công việc này cho tôi

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});