javascript - 如果复选框的值发生更改，则为复选框添加一个类

Question

如果特定复选框的值发生更改，我想向其添加一个新类，但我有太多复选框，我不知道如何设置触发器。

这是我到目前为止得到的:

 $( "I dont know what to put here since I have lots of checkbox" )
      .change(function() 
    {
      $(this).addClass("edited");
    }
 );

编辑:我通过ajax在表中生成复选框:

$("#ButtonLR").click(function () {
//stopwatch
var start = window.performance.now();

$("#getData").empty();

// display loading bar.
$("#getData").append("<div id='loadingBar'></div>");

var projects = [];

$("#CheckBoxListProjects").find("input:checked").each(function () {
    projects.push(this.value);
});
});

$.ajax({
    type: "POST",
    url: "Ajax/GetData.ashx",
    data: { projects: projects},
    dataType: "json",
})
.done(function (data) {
    var count = updateDataTable(data).count

});

});

这是生成包含复选框的表的函数，isapproved 和ignore 是复选框。

function updateDataTable(data) {
// Clear the data table.
var count = 0;
$("#getData").empty();

// Create new data table.
$("#getData").append("<div id='resources'></div>");

// Create header for data table.
$("#resources").append("<div>" +
    "<span class='noedit'>" + "Project" + "</span>" +
    "<span class='noedit'>" + "IsApproved" + "</span>" +
    "<span class='noedit'>" + "Ignore" + "</span>" +
    "</div>");
$("#getData").append("<div id='resources'></div>");
// For each item, append to data table.
$.each(data, function (i, item) {
    if (item["IsApproved"] == true) {
        item["ApproveCheck"] = "<input type='checkbox' checked>";
    }
    else {
        item["ApproveCheck"] = "<input type='checkbox'>";
    }
    if (item["ParserError"] == true) {
        item["Ignore"] = "<input type='checkbox' checked>";
    }
    else {
       item["Ignore"] = "<input type='checkbox'>";
    }

    $("#resources").append("<div>" +
   "<span'>" + item["ProjectFile"] + "</span>" +
   "<span'>" + item["ApproveCheck"] + "</span>" +
   "<span'>" + item["Ignore"] + "</span>" +
   "</div>");
    }
    count++;
});

return {
    count: count,

};

}

我希望复选框 IsApproved 和 Ignore 在值更改后添加类“edited”。

Answer 1

您可以使用事件委托(delegate)...仅选择第二个和第三个复选框(因为这些似乎是有问题的):

$(document).on("change", "#resources div > span:nth-child(2) > input[type=checkbox], #resources div > span:nth-child(3) > input[type=checkbox]", function() {
    $(this).addClass("edited");
});

当接收到 change 事件时，这只会将该类附加到 span 内的第二个和第三个复选框。