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

目前，我有多个复选框输入具有分配给输入的不同名称（checkit，checktype，checklog）。我想要做的是让每个复选框在选中时更改背景的颜色。但是，我不知道如何分配每个复选框来执行一些任务而不复制下面的代码？如果可能，一些示例或提示将会很棒！我很想听到你的消息。如何用不同名称的复选框更改CSS？

如果我想让所有输入都做同样的事情，我应该删除name =“checkit”吗？如果我想让他们做一些稍微不同的事情呢？

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

来源

2017-10-11 Tony

添加类每参考，而不是寻找的名字 –

添加由以下，或给予一定的类名称，以它

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

来源

2017-10-11 06:56:24 PraveenKumar

您可以选择删除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'); 

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

来源

2017-10-11 06:50:12

什么，如果我只希望有一定的投入名字做什么？怎么可能？ – Tony

您需要像'$（'input [name =“1”]，输入[name =“2”]'）'一样使用分隔符选择器。这只返回具有给定选择器的元素 –

将它作为一个类。例如你可以在jquery中引用$（'input.checkit） –

不要使用jQuery中的name atrribute并添加普通类每个复选框为一个共同的功能，并与类访问它如下所示，在jQuery中选择器。

如果你想做一些不同的复选框，除此之外，那么你可以添加更多的jQuery代码为特定的输入标签。它不会影响这段代码。

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

来源

2017-10-11 06:54:49

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

来源

2017-10-11 07:05:42

使用

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

而不是

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

来源

2017-10-11 10:24:07

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

回答

相关问题