在 jQuery .change 上从具有相同类的不同复选框中获取唯一字段

Question

为了提高效率，我正在尝试设计一个 jQuery 函数，该函数可由共享一个公共类的不同复选框使用。当用户更改其中一个复选框时，该函数由.change 事件触发。诀窍是，我需要捕获已更改复选框的唯一数据。

我的 HTML：

Field 123: <input type="checkbox" name="pubfield" value="123" class="pubfield"><br>

Field 999: <input type="checkbox" name="pubfield" value="999" class="pubfield"><br>

我的 jQuery 函数：

$(function(){
    $( ".pubfield" ).change(function() {
        var change_field    = $('.pubfield').val();
        var showit          = $('input.pubfield').prop('checked'); /* true or false */
        alert('Updating field ' + change_field + ' to '  + showit);
    }); 
});

可以预见，该函数仅捕获第一个复选框字段的输入值和复选框状态，即使第二个已更改。如何重复使用相同的功能，但仅从正在更改的复选框中捕获唯一数据？

Answer 1

试试：

$(function(){
   $( ".pubfield" ).change(function() {
       var change_field    = $(this).val();
       var showit          = $(this).prop('checked'); /* true or false */
       alert('Updating field ' + change_field + ' to '  + showit);
   }); 
});

元素$(this)代表触发事件的元素...

Answer 2

您必须在事件处理程序中使用this，而不是再次调用选择器：

$(function(){
    $( ".pubfield" ).change(function() {
        var change_field    = $(this).val();
        var showit          = $(this).prop('checked'); /* true or false */
        alert('Updating field ' + change_field + ' to '  + showit);
    }); 
});