Javascript 使用按钮更改已设置样式的复选框的颜色

我已经在这上面呆了一段时间了。为了快速解释，我有一个不同的复选框表。用户检查任意多个框并单击“继续”。相同的表格显示在另一页上/选中的框应通过单击按钮加载

我的问题是，如何通过单击按钮将样式复选框的颜色更改为其他颜色

更新，我添加了代码，很抱歉造成混淆，第一次使用此功能

table.example1，table.example1 th，table.example1 td{
边框：3倍纯色灰色；
最大宽度：200px；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
显示：内联块；
填充：6px 60px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景色：透明；
背景重复：重复-x；
}
输入[类型=复选框]：选中+标签{
背景色：#3e618b；
大纲：0；
}

1.
2.
更改复选框颜色

您可以向标签添加一个类，然后根据该类定义颜色，如下所示：

函数切换（）{
var labels=document.getElementsByTagName（'label'）；
对于（变量i=0；i

table.example1，
表1.示例1，
表1.example1 td{
边框：3倍纯色灰色；
最大宽度：200px；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
显示：内联块；
填充：6px 60px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景色：透明；
背景重复：重复-x；
}
输入[类型=复选框]：选中+标签{
背景色：#3e618b；
大纲：0；
}
输入[类型=复选框]：选中+label.color{
背景色：红色；
大纲：0；
}

1.
2.
更改单选按钮单击

您可以向标签添加一个类，然后根据该类定义颜色，如下所示：

函数切换（）{
var labels=document.getElementsByTagName（'label'）；
对于（变量i=0；i

table.example1，
表1.示例1，
表1.example1 td{
边框：3倍纯色灰色；
最大宽度：200px；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
显示：内联块；
填充：6px 60px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景色：透明；
背景重复：重复-x；
}
输入[类型=复选框]：选中+标签{
背景色：#3e618b；
大纲：0；
}
输入[类型=复选框]：选中+label.color{
背景色：红色；
大纲：0；
}

1.
2.
更改单选按钮单击

可以通过单击按钮更改父级的类属性

$（“按钮”）。单击（函数（）{
$（“表”）.toggleClass（“备选方案”）；
});
table.example1，table.example1 th，table.example1 td{
边框：3倍纯色灰色；
最大宽度：200px；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
显示：内联块；
填充：6px 60px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景色：透明；
背景重复：重复-x；
}
输入[类型=复选框]：选中+标签{
背景色：#3e618b；
大纲：0；
}
.可选输入[类型=复选框]：选中+标签{
背景色：#f00；
}

1.
2.
更改复选框颜色
您可以通过单击按钮更改父级的类属性


$（“按钮”）。单击（函数（）{
$（“表”）.toggleClass（“备选方案”）；
});
table.example1，table.example1 th，table.example1 td{
边框：3倍纯色灰色；
最大宽度：200px；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
显示：内联块；
填充：6px 60px；
页边距底部：0；
字体大小：14px；
线高：20px；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景色：透明；
背景重复：重复-x；
}
输入[类型=复选框]：选中+标签{
背景色：#3e618b；
大纲：0；
}
.可选输入[类型=复选框]：选中+标签{
背景色：#f00；
}

1.
2.
更改选中的复选框颜色
只需使用CSS即可

隐藏原始输入字段

input[type=checkbox]{
visibility: hidden;
position: absolute;
}

然后添加您自己的自定义css以显示字段

input[type=checkbox] + label:before{
  height:18px;
  margin-right: 5px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #ccc;
  border-radius:4px;
  width:18px;
}

选中复选框后，为所需样式和背景添加css

input[type=checkbox]:checked + label:before{
      background: gold;
}

你只需要CSS就可以做到

隐藏原始输入字段

input[type=checkbox]{
visibility: hidden;
position: absolute;
}

然后添加您自己的自定义css以显示字段

input[type=checkbox] + label:before{
  height:18px;
  margin-right: 5px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #ccc;
  border-radius:4px;
  width:18px;
}

选中复选框后，为所需样式和背景添加css

input[type=checkbox]:checked + label:before{
      background: gold;
}

显示复选框的html。点击按钮，您可以使用jquery向所有选中的复选框添加另一个类，您可以使用css自定义（设置您想要的颜色）。。。如果你想要一个有效的解决方案，你应该提供你的html。欢迎访问StackOverflow.com。请在问题中添加一些代码。您可以使用复制您的问题代码。请添加一些