时间戳

首页 > 解决方案 > 活动复选框更改除了单元格之外的表格背景颜色

html - 活动复选框更改除了单元格之外的表格背景颜色

问题描述

当复选框处于非活动状态时，表格不会更改，一旦单击复选框，所有单元格的背景颜色都会变为黄色，除了中间的变为红色。 这就是我需要达到的结果

label {
      -webkit-appearance: button;
      -moz-appearance: button;
      appearance: button;
      display: inline-block;
      cursor: pointer;
      margin:5px;
    }

    #checkbox_id:checked + table {
      background-color: yellow;
    }

    /*Table styles*/
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:10px 5px;word-break:normal; width: 50px; height: 50px;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal; width: 50px; height: 50px;}
    .tg .tg-0lax{text-align:left;vertical-align:top}
<!DOCTYPE html>
<html lang="it" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Check6</title>
  </head>
  <body>
    <label for="checkbox_id">CLICCA</label>
    <input type="checkbox" id="checkbox_id">
    <table class="tg">
<thead>
  <tr>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
    <th class="tg-0lax"></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax"></td>
    <td id="red"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</tbody>
</table>
  </body>
</html>

已经感谢您的帮助。

标签： htmlcsscheckbox

解决方案

将以下代码添加到您的 CSS 中：

#checkbox_id:checked+table #red {
  background-color: red;
}

这是一个代码片段：

label {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

#checkbox_id:checked+table {
  background-color: yellow;
}

#checkbox_id:checked+table #red {
  background-color: red;
}


/*Table styles*/

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  width: 50px;
  height: 50px;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  width: 50px;
  height: 50px;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top
}
<!DOCTYPE html>
<html lang="it" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Check6</title>
</head>

<body>
  <label for="checkbox_id">CLICCA</label>
  <input type="checkbox" id="checkbox_id">
  <table class="tg">
    <thead>
      <tr>
        <th class="tg-0lax"></th>
        <th class="tg-0lax"></th>
        <th class="tg-0lax"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tg-0lax"></td>
        <td id="red"></td>
        <td class="tg-0lax"></td>
      </tr>
      <tr>
        <td class="tg-0lax"></td>
        <td class="tg-0lax"></td>
        <td class="tg-0lax"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

推荐阅读