复选框 css/jquery 样式更改

Question

我的代码的目的是在我选中/取消选中该框时更改颜色的 <td> 部分和表格内的字体，但它没有按预期工作我从here 获得的代码。

input[type=checkbox] + td {
    background-color: #FFFFFF;
    color:#000000
} 

input[type=checkbox]:checked + td {
    background-color: #00447C;
    color:#FFFFFF;
} 

<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

它在源代码中有效，所以我对此感到困惑。

Answer 1

使用 jquery，您可以执行以下操作：

var checkboxes = $("input[type='checkbox']");

function checkbox_function()
{
/*
  var tr = $(this).parent().parent();
  if ($(tr).hasClass('checked'))
  {
    $(tr).removeClass("checked");
  }
  else
  {
    $(tr).addClass("checked");
  }
*/
  var parent = $(this).parent();
  if ($(this).is(":checked"))
  {
    $(parent).siblings().addClass("checked");
  }
  else
  {
    $(parent).siblings().removeClass("checked");
  }
  
  
}

$.each(checkboxes, function(index, item) {
    $(item).change(checkbox_function);
  });

tr.unchecked {
    background-color: #FFFFFF;
    color:#000000
} 

tr.checked {
    background-color: #00447C;
    color:#FFFFFF;
}

td{
    background-color: #FFFFFF;
    color:#000000  
}

td.checked{
    background-color: #00447C;
    color:#FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

它的作用是获取所有复选框，然后在它们上放置一个更改侦听器。

（根据自己的喜好编辑）。

Answer 2

CSS 中的+ 选择器选择与前一个选择器相邻的元素。所以input + td 将在以下示例中选择<td>：

<input />
<td></td>

但不是在这个：

<div>
    <input />
</div>
<td></td>

因此，您的 CSS 不会指向标记中现有的 <td> 元素。

编辑：一种（示例）解决方法是省略您的<td> 标签，因为所有符合标准的浏览器都实现了没有<td>s 的表。

Answer 3

css中的加号表示：

选择每个样式并设置样式

元素紧跟在 div + p { background:'#fff'; 元素之后}

这意味着在你的情况下它会选择输入[..]之后的任何 td

Answer 4

加号 (+) 是指同级，但您的复选框是单元格的子级，因此您应该使用 V 形 (>) 或空格 ()。

http://techbrij.com/css-selector-adjacent-child-sibling

但是，您不能根据子级设置父级的样式，反之亦然。所以你可能不得不求助于 javascript 从单元格中添加/删除一个类。