javascript - 使用 JQuery 在 td 单击或复选框单击时更改 td 的 CSS

Question

如果用户单击 td 本身或复选框，我试图让我的 td 改变颜色。

现在，如果用户点击 td，css 将发生变化，复选框将选中/取消选中。

但是如果复选框被点击，没有任何变化。此外，如果刷新页面，复选框会被选中，但 CSS 消失了。

我做错了什么？

JSFiddle

<table>
<tr><td><input type="checkbox" name="my-group[]" value="1">A</td></tr>
<tr><td><input type="checkbox" name="my-group[]" value="2">B</td></tr>
<tr><td><input type="checkbox" name="my-group[]" value="3">C</td></tr>
<tr><td><input type="checkbox" name="my-group[]" value="4">D</td></tr>
</table>

<script>
var chosen = {'background-color': '#9F1313', 'color': '#fff'};
var unchosen = {'background-color': 'transparent', 'color': '#000'};

$('td').click(function (event) {
    if (!$(event.target).is('input')) {
        $('input:checkbox', this).prop('checked', function (i, value) {
            highlight(this, $(this).closest('td'));
            return !value;
        });
    }
});

function highlight(cb, cell) {
    if (cb.checked) {
        $(cell).css(unchosen);
    } else {
        $(cell).css(chosen);
    }
}
</script>

Answer 1

问题是由于事件从复选框冒泡到父 td，但是你可以完全避免这个问题，使代码更语义化，有更好的支持，并通过使用更简单label 然后根据复选框的 checked 状态在父级 td 上切换一个 CSS 类。试试这个:

$('.table-responsive :checkbox').on('change', function() {
  $(this).closest('td').toggleClass('chosen', this.checked);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
  label {
    display: block;
    font-weight: normal;
    margin: 0;
  }
  
  td {
    background-color: transparent;
    color: #000;
  }
  
  td.chosen {
    background-color: #9F1313;
    color: #fff;
  }
</style>
<div class="table-responsive">
  <div class="container">
    <table class="table table-striped table-hover table-condensed">
      <tr>
        <td><label><input type="checkbox" name="my-group[]" value="1"> A</label></td>
      </tr>
      <tr>
        <td><label><input type="checkbox" name="my-group[]" value="2"> B</label></td>
      </tr>
      <tr>
        <td><label><input type="checkbox" name="my-group[]" value="3"> C</label></td>
      </tr>
      <tr>
        <td><label><input type="checkbox" name="my-group[]" value="4"> D</label></td>
      </tr>
    </table>
  </div>
</div>