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

});

}）;

这是生成包含复选框，已批准和忽略的复选框的函数。

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并忽略在更改值后添加“已编辑”类。

Answer 1

您可以使用事件委派...仅选择第二个和第三个复选框（因为这些似乎是相关的）：

$(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");
});

这会在收到span事件时将该类仅追加到change内的第二个和第三个复选框。

Answer 2

只需使用一个类＆＃34;复选框＆＃34;对于您的复选框，然后使用：

$( ".checkbox" ).change(function() {
    $( this ).addClass( "edited" );
});

Answer 3

也许这会起作用

//I assume you want al checkbox in #getData to have this behaviour
//Use a class for your checkboxes, I used .checkbox, is better than using input[type=...
$('#getData').find('.checkbox').on('change', function () {
    $(this).addClass('my-class');
});

您可以使用事件委派来提高性能，表格很大。

Answer 4

您可以执行以下操作：

在您编辑后要添加课程的输入中添加data-edit：

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 data-edit='true'>";
    }
    else {
        item["ApproveCheck"] = "<input type='checkbox'>";
    }
    if (item["ParserError"] == true) {
        item["Ignore"] = "<input type='checkbox' checked>";
    }
    else {
       item["Ignore"] = "<input type='checkbox' data-edit='true'>";
    }

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

return {
    count: count,

};

然后在编辑后将类添加到它们中：

$( "input[type=checkbox]" ).filter(function(){
    return $(this).data('edit');
}).change(function(){
      $(this).addClass("edited");
    });

如果值已更改，请为复选框添加类

4 个答案: