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

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>