Làm cách nào để biết một hộp kiểm có thực sự được nhấp không?

Question

Tôi có một ràng buộc cho nhiều đầu vào.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() { 
    // do something here 
    // do something extra here if $(this) was actually clicked 
}); 

Kể từ khi có những cách khác bắt đầu một sự thay đổi của một, (.change jquery() của phương pháp cho một) đầu vào, Có cách nào để biết một hộp kiểm đã thực sự nhấp vào để gây ra sự kiện thay đổi?

Tôi đã cố gắng tập trung tuy nhiên sự kiện trọng tâm sẽ kích hoạt trước sự kiện thay đổi của hộp kiểm để không hoạt động.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() { 
    // do something here 
    if($(this).is(":focus")) // do something extra here but focus doesn't happen here for checkboxes. 
}); 

Chỉnh sửa # 1

Xin lỗi tôi không thực sự biết làm thế nào để làm rõ điều này hơn nữa ... Tôi không quan tâm nếu hộp kiểm được kiểm tra hay không ... Tôi biết những gì. là (": checked") là và cách sử dụng nó. Nó không giúp gì ở đây. Tôi chỉ muốn biết liệu hộp kiểm có thực sự được nhấp vào để kích hoạt sự kiện thay đổi hay không.

Chỉnh sửa # 2

Tôi có một công việc xung quanh ... đầu tiên tôi liên kết nhấp chuột cho đầu vào và chọn lựa và lưu trữ các id của phần tử. Sau đó, trong ràng buộc thay đổi của tôi, tôi kiểm tra xem liệu phần tử đã thay đổi có phải là phần tử được nhấp lần cuối cùng không.

$("input, select").click(function() { 
    var myId = $(this).attr("id"); 
    lastClickedStore.lastClicked = myId; 
}); 

Sau đó, trong liên kết thay đổi, tôi chỉ kiểm tra xem ID hiện tại có bằng Id được nhấp cuối cùng không.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() { 
    // do something 
    if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else. 
} 

Answer 1

Vì vậy, đây là cách tôi giải quyết vấn đề này. Lần đầu tiên tôi liên kết các nhấp chuột cho các đầu vào và chọn và lưu trữ id của phần tử.Sau đó, trong ràng buộc thay đổi của tôi, tôi kiểm tra xem liệu phần tử đã thay đổi có phải là phần tử được nhấp lần cuối cùng không.

$("input, select").click(function() { 
    var myId = $(this).attr("id"); 
    lastClickedStore.lastClicked = myId; 
}); 

Sau đó, trong liên kết thay đổi, tôi chỉ kiểm tra xem ID hiện tại có bằng Id được nhấp cuối cùng không.

$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("change", function() { 
    // do something 
    if(lastClickedStore.lastClicked == $(this).attr("id")) // do something else. 
} 

Answer 2

if ($ (this) .là (': kiểm tra')) ....

if ($ (this) .attr ('kiểm tra')) ...

EDIT: cũng vậy, nếu tất cả các hộp kiểm là dành cho "gia đình", hãy đảm bảo chỉ có một hộp kiểm có thể được kiểm tra bằng cách xác định tên = the-same-for-all-items và id = khác nhau cho mỗi mục.

Ex: 

<input type='checkbox' name='fruits' id='orange' >orange 
<input type='checkbox' name='fruits' id='melon' >melon 
<input type='checkbox' name='fruits' id='banana' >banana 
<input type='checkbox' name='fruits' id='apple' >apple 
<input type='checkbox' name='fruits' id='...' >.... 

EDIT: if it was clicked: the id? 

console.log($(this.id)); 

Answer 3

Bạn có thể thử thực hiện:

 
$("#foo", "#bar", "#fooCheckbox", "#barCheckBox").bind("click", function() { 
    // do something here 
    if($(this).is(":checked")) // do something extra here but focus doesn't happen here for checkboxes. 
}); 

Hy vọng nó giúp

Answer 4

Bind to click thay vì change. Sự kiện này click vẫn sẽ được kích hoạt khi nhà nước kiểm tra hộp được thay đổi với bàn phím, nhưng event.pageX và event.pageY sẽ 0 trong trường hợp đó, vì vậy bạn có thể viết:

$("#foo, #bar, #fooCheckbox, #barCheckBox").click(function(event) { 
    // Do something here... 
    if (event.pageX > 0) { 
     // Check box was clicked, do something extra here... 
    } 
}); 

Answer 5

Hãy thử điều này:

<input type="checkbox" onClick="doSomething()"> 

    or 

$("#foo","#bar","#fooCheckbox","#barCheckBox").click(function(){ 
    doSomething(); 
}); 

Answer 6

Frédéric Hamidi câu trả lời là tốt. Nhưng nếu bạn muốn nâng cao một sự kiện 'thay đổi' theo lập trình, thì mã của anh ta, thật không may, sẽ không hoạt động. Nếu bạn thực sự muốn những gì bạn mô tả, hãy thử phiên bản này:

$('#foo, #bar').bind({ 
    click: function() { 
     alert('click ' + this.id); 
     if ($(this).hasClass('changed')) { 
      alert('click+change ' + this.id); 
      $(this).removeClass('changed'); 
     } 
    }, 
    change: function() { 
     alert('change ' + this.id); 
     $(this).addClass('changed'); 
    } 
}); 

Demo.