Javascript 如何使用不同名称的复选框更改css？

目前，我有多个复选框输入，它们的名称不同（checkit、checktype、checklog）。 我想做的是让每个复选框在选中时更改背景颜色。 但是，我不知道如何在不重复以下代码的情况下分配每个复选框来执行某些任务？如果可能，一些示例或提示将非常有用！我很想听到你的消息

如果我想让所有输入都执行相同的操作，是否应该删除name=“checkit”？如果我想让他们做一些稍微不同的事情呢

$('input[name="checkit"]').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
    });

---

您可以从选择器中删除

名称

部分，并为

输入[type='radio']

添加选择器。如果你想添加一些不同的逻辑（我想你指的是不同的类），你可以得到当前复选框的名称，并使用它来创建你的逻辑。像这样的

$('input[type="radio"]').change(function () {
     var checkboxName = $(this).prop('name');

     // if(checkboxName === .....)

});

根据评论更新

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    var checkboxName = $(this).prop('name');

    // .............
});

---

您可以从选择器中删除

名称

部分，并为

输入[type='radio']

添加选择器。如果你想添加一些不同的逻辑（我想你指的是不同的类），你可以得到当前复选框的名称，并使用它来创建你的逻辑。像这样的

$('input[type="radio"]').change(function () {
     var checkboxName = $(this).prop('name');

     // if(checkboxName === .....)

});

根据评论更新

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    var checkboxName = $(this).prop('name');

    // .............
});

---

不要在jQuery中使用

名称

属性，在每个常用功能复选框中添加一个通用类，并使用jQuery中的类选择器访问它，如下所示

如果您想使用不同的复选框做一些不同的事情，那么可以为特定的输入标记添加更多jQuery代码。它不会影响此代码

$('input.someClass').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
});

---

不要在jQuery中使用

名称

属性，在每个常用功能复选框中添加一个通用类，并使用jQuery中的类选择器访问它，如下所示

如果您想使用不同的复选框做一些不同的事情，那么可以为特定的输入标记添加更多jQuery代码。它不会影响此代码

$('input.someClass').change(function () {
        if ($(this).prop('checked')) {
            $(this).parent().parent().addClass('alterBackground');
        } else {
            $(this).parent().parent().removeClass('alterBackground');
        }
});

---

添加以下内容，或为其指定一些类名

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    if ($(this).prop('checked')) {
        $(this).parent().parent().addClass('alterBackground');
    } else {
        $(this).parent().parent().removeClass('alterBackground');
    }
});

---

添加以下内容，或为其指定一些类名

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function () {
    if ($(this).prop('checked')) {
        $(this).parent().parent().addClass('alterBackground');
    } else {
        $(this).parent().parent().removeClass('alterBackground');
    }
});

使用

$（'input[type=“checkbox”]”）

而不是

$（'input[name=“checkit”]”）

使用

$（'input[type=“checkbox”]”）

而不是

$（'input[name=“checkit”]”）

---

向每个对象添加一个类并引用它，而不是查找名称向每个对象添加一个类并引用它，而不是查找名称如果我只需要具有特定名称的输入，该怎么办？怎么可能呢？您需要使用分隔符选择器，如

$（'input[name=“1”]、input[name=“2”]）

。这只返回具有给定选择器的元素，并将其作为类。例如，您可以在jquery中引用$（'input.checkit），如果我只想让具有特定名称的输入做些什么呢？怎么可能呢？您需要使用分隔符选择器，如

$（'input[name=“1”]、input[name=“2”]）

。这只返回具有给定选择器的元素，并将其作为类。例如，您可以在jquery中引用$（'input.checkit）