jquery - 复选框 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>

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

(根据您的喜好进行编辑)。