Question

我已经坚持了一段时间。为了快速解释，我有一个不同的复选框表。然而，用户检查许多框和点击继续。同一个表显示在另一个页面上/通过单击按钮加载被检查的框。

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

更新，我已添加了代码，对不起混淆，第一次使用

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以点击按钮更改父级的class属性。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;
}

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

3 个答案: