使用按钮更改样式选中复选框的颜色

Question

我已经坚持了一段时间了。为了快速解释，我有一张不同复选框的表格。用户选中许多框并继续单击。同一个表格显示在另一个页面上/被选中的框应该通过单击按钮来加载。

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

更新，我已经添加了代码，很抱歉造成混乱，第一次使用这个

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 6px 60px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    background-repeat: repeat-x;
}

input[type=checkbox]:checked + label{
    background-color: #3e618b;
    outline: 0;
}

<table class="example1" id="example" style="width:40%;" align='center'>
    <tr>
        <td>
            <input type="checkbox" id="chk1" name="chk" value="1">
              <label for="chk1">&nbsp; 1</label>
        </td>
        <td>
            <input type="checkbox" id="chk2" name="chk"value="2">
            <label for="chk2">&nbsp; 2</label>
        </td>
    </tr>
</table> 

<button>Changes checked checkbox color</button>

Answer 1

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

function toggle() {
  var labels = document.getElementsByTagName('label');
  for(var i = 0; i < labels.length; i++) {
    labels[i].classList.toggle('color');
  }
}

table.example1,
table.example1 th,
table.example1 td {
  border: 3px solid grey;
  max-width: 200px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  display: inline-block;
  padding: 6px 60px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: white;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  background-repeat: repeat-x;
}

input[type=checkbox]:checked+label {
  background-color: #3e618b;
  outline: 0;
}
input[type=checkbox]:checked+label.color {
  background-color: red;
  outline: 0;
}

<table class="example1" id="example" style="width:40%;" align='center'>
  <tr>
    <td>
      <input type="checkbox" id="chk1" name="chk" value="1">
      <label for="chk1">&nbsp; 1</label>
    </td>
    <td>
      <input type="checkbox" id="chk2" name="chk" value="2">
      <label for="chk2">&nbsp; 2</label>
    </td>
  </tr>
</table>

<button onclick="toggle()">Changes radio button onclick</button>

Answer 2

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

$("button").click(function() {
  $("table").toggleClass("alternative");
});

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 6px 60px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    background-repeat: repeat-x;
}

input[type=checkbox]:checked + label{
    background-color: #3e618b;
    outline: 0;
}
.alternative input[type=checkbox]:checked + label{
    background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" id="example" style="width:40%;" align='center'>
    <tr>
        <td>
            <input type="checkbox" id="chk1" name="chk" value="1">
              <label for="chk1">&nbsp; 1</label>
        </td>
        <td>
            <input type="checkbox" id="chk2" name="chk"value="2">
            <label for="chk2">&nbsp; 2</label>
        </td>
    </tr>
</table> 

<button>Changes checked checkbox color</button>

Answer 3

你可以用 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;
}