使用html中的复选框在表格上切换颜色

debugcn 发表于 Dev

标记

所以我有一张这样的桌子

<table class="rest_tab" border="1">
<tbody><tr><th>Times</th><th></th><th></th></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td><td align="right"><input  type="checkbox" class="selectAll" id="Checkbox5" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td></tr>
</tbody></table>

演示：

$(document).ready(function() {
  $('.pretty tr').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
    $(this).toggleClass('red');
  }, function() {
    $(this).toggleClass('red');
    $(this).find(':checkbox').attr('checked', false);
  });
});

table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #00cccc;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}

table td:hover {
  background: #C1FFC1;
}

table td:click {
  background: #fcc;
}

table td:hover {
  color: #000;
}

table th,
table td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
  border-collapse: collapse;
}

table th {
  background: #00cccc;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}

table th.last {
  border-right: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
  <tbody>
    <tr>
      <th>Times</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox5" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td>
    </tr>
  </tbody>
</table>

我希望能够，而不是仅在悬停时更改颜色，而在选中表中每个框的复选框时仍保留颜色。

我已经尝试了很长时间，但无法让js来做我想做的事，任何帮助将不胜感激。

Dhiraj

具有这样的CSS规则，这将帮助您切换复选框选择

.selected{
    background-color: #C1FFC1;
}

在您的js中，您可以执行以下操作

$('.selectAll').change(function(){
  $(this).closest('td').toggleClass('selected');
});

更新了您的jsfiddle演示

$(document).ready(function () {
     $('.selectAll').change(function(){
        $(this).closest('td').toggleClass('selected');
    });
});

table {
    font-family:'Arial';
    margin: 25px auto;
    border-collapse: collapse;
    border: 1px solid #eee;
    border-bottom: 2px solid #00cccc;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
table td:hover {
    background: #C1FFC1;
}
table td:click {
    background: #fcc;
}
table td:hover {
    color: #000;
}
table th, table td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse;
}
table th {
    background: #00cccc;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}
table th.last {
    border-right: none;
}
.selected{
    background-color: #C1FFC1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
    <tbody>
        <tr>
            <th>Times</th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox4" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox5" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox7" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox8" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox10" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox11" on="">
            </td>
        </tr>
    </tbody>
</table>