Fatal编程技术网
  • javascript/
  • Javascript 如果复选框的值已更改，则为其添加一个类

Javascript 如果复选框的值已更改，则为其添加一个类

javascript jquery checkbox

Javascript 如果复选框的值已更改，则为其添加一个类,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,我想在特定的复选框中添加一个新的类，如果它的值被更改，但是我有太多的复选框，我不知道如何设置触发器 以下是我目前得到的信息： $( "I dont know what to put here since I have lots of checkbox" ) .change(function() { $(this).addClass("edited"); } ); 编辑：我通过ajax在表中生成复选框： $("#ButtonLR").click(fu

我想在特定的复选框中添加一个新的类，如果它的值被更改，但是我有太多的复选框，我不知道如何设置触发器

以下是我目前得到的信息：

 $( "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,

};
}

更改值后，我希望复选框被批准并忽略以添加类“编辑”。

您可以使用事件委派。。。要仅选择第二个和第三个复选框，因为它们似乎是有问题的复选框：

$(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");
});
这将在接收更改事件时仅将类附加到范围内的第二个和第三个复选框中。

您可以使用事件委派。。。要仅选择第二个和第三个复选框，因为它们似乎是有问题的复选框：

$(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");
});
这将在接收更改事件时仅将类附加到范围内的第二个和第三个复选框中。

只需在复选框中使用类复选框，然后使用：

$( ".checkbox" ).change(function() {
    $( this ).addClass( "edited" );
});
只需在复选框中使用类复选框，然后使用：

$( ".checkbox" ).change(function() {
    $( this ).addClass( "edited" );
});
也许这会奏效

//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');
});
如果表太大，您可以使用事件委派来提高性能。

也许这样可以

//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');
});
如果表很大，您可以使用事件委派来提高性能。

您可以执行以下操作：

将数据编辑添加到要在编辑后添加类的输入：

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");
    });
您可以执行以下操作：

将数据编辑添加到要在编辑后添加类的输入：

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");
    });
请显示您的html。您谈论的复选框与页面上的其他复选框有何不同？它有自己的ID或类吗？@spryno724'但我有很多复选框'你的选择器会影响所有checkboxes@George是的，但这就是我们所有的信息…你能分享目标复选框的html吗？请显示你的html。你所说的复选框与你页面上的其他复选框有何不同？它有自己的ID或类吗？@spryno724'但我有很多复选框'你的选择器会影响所有checkboxes@George正当但是这就是我们所有的信息…你能分享目标复选框的html吗？这会影响所有的复选框，而这不是OP想要的。问题的第一句话我想在特定的复选框中添加一个新类。这可以完成任务。没有其他要添加的内容。@Amijafari在回答中编辑。这将影响所有复选框，而这不是OP想要的。问题的第一句话我想在特定的复选框中添加一个新类。这将完成任务。“没有其他要添加的内容了。”阿米贾法里在回答中编辑道。