Question

如果用户点击td本身或复选框，我会尝试让td更改颜色。

现在，如果用户点击td css 将更改，则复选框将选中/取消选中。

但如果点击该复选框，则无法更改。另外，如果页面被刷新，则复选框被选中，但CSS就不见了。

我做错了什么？

<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，但是你可以完全避免问题，使代码更具语义，有更好的支持，并且使用{{1然后根据复选框的label状态切换父td上的CSS类。试试这个：

＆＃13;

checked

＆＃13;

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

＆＃13;

Answer 2

这是我的建议，这将在TD和复选框中绑定事件，同时也防止双重触发。

$('td').on('click',function(event){ 
     var td  = $(this);
     var checkBox = $(this).find('input:checkbox');

     if($(event.target).is('input')){                 // checks if event target is checkbox
        event.stopPropagation();                      // prevents triggering click event on TD too
     } else {
        checkBox.trigger('click');                    // if its TD, triggers checkbox click event
        return;                                       // and stop the code
     }

     if(checkBox.is(':checked')){                     // checks if checkbox is checked!
        td.css('background-color','red');
     } else {
        td.css('background-color','transparent');
     }

 });

你可以在这里看到它： https://codepen.io/FaridNaderi/pen/PjVXrm

希望它至少有所帮助。

Answer 3

问题来自于事件冒泡添加event.stopImmediatePropagation();到您的点击事件。

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

使用JQuery在td点击或复选框点击上更改td的CSS

3 个答案: