Question

目前，我有多个复选框输入，其中包含分配给输入的不同名称（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');
        }
    });

Answer 1

添加以下内容，或为其提供一些类名

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

Answer 2

您可以从选择器中删除name部分，并为input[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');

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

Answer 3

不要在jQuery中使用name atrribute，并为每个复选框添加一个公共类以获取常用功能，并使用jQuery中的类选择器访问它，如下所示。 / p>

如果您希望使用不同的复选框执行不同的操作，则可以为该特定输入标记添加更多jQuery代码。它不会影响此代码。

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

Answer 4

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

Answer 5

使用

$（ '输入[类型= “复选框”]'）

而不是

$（ '输入[名称= “checkit”]'）

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

5 个答案: