Question

我需要有关此代码的帮助，当我选中复选框时，如何更改整个标签的背景色？我要整个td或在选中复选框时更改其背景

我想我只能通过使用CSS来实现

https://codepen.io/Haitham1000/pen/ZEWPMeY

<table class="choices">
  <tr>
    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">All categories</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">1</label>
      </div>
    </td>

    <td>
      <div class="checkbox disabled">
        <label><input type="checkbox" value="" disabled>2</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">3</label>
      </div>
    </td>

    <td>
      <div class="checkbox">
        <label><input type="checkbox" value="">4</label>
      </div>
    </td>
  </tr>
</table>

Answer 1

那将需要一个父选择器，而CSS没有该选择器。但是，您需要选中复选框后的兄弟姐妹。这意味着您可以有一个背景元素，该元素可以拉伸整个宽度和高度，并且在所有其他元素后面都可以改变颜色。查看我的代码段

input:checked ~ .background {
  background-color: blue;
}

.background {
  position: fixed;
  z-index: -1;
  
  top: 0; left: 0;

  width: 100vw;
  height: 100vh;
  
  background-color: grey;
}

<input type="checkbox">
<div class="background">

Answer 2

很简单！

在输入后放置标签：

<input type="checkbox" value=""><label>All categories</label>

将此CSS添加到您的代码中：

input:checked ~ label {
  background-color: blue;
}

选中复选框时更改标签背景颜色

2 个答案:

很简单！