javascript - 单选按钮所在的颜色单元格并被选中，但单击时未选中

Question

我试图通过检查是否选择了隐藏的单选按钮来在 $(document).ready(function(){ 加载过程中为表格单元格着色。如果是，我需要要突出显示的表格单元格。

我有以下代码:

if($('#q1c').is(':checked')) { 
    $(this).effect("highlight", {color: 'green'}, 1000);
    $(this).addClass("selected");
}

但这不起作用，因为它没有引用单选按钮所在的表格单元格，它使用的 this 是不正确的。

下面的代码基于on click 事件来工作:

$('#rq1').on('click', 'td', function() {
   $(this).find('input:radio').prop('checked', true);
   $('.q1').removeClass("selected");
   $(this).effect("highlight", {color: 'green'}, 1000);
   $(this).addClass("selected");
});

我正在尝试实现相同的目标，但要在页面加载并且预先选择单选按钮时突出显示单元格。

JS fiddle :

根据下面的反馈，尝试实现以下内容，但没有任何乐趣。

https://jsfiddle.net/hryxge5n/1/

我想知道 closest 是否正确 - 我正在努力弄清楚单选按钮和表格单元格是否存在允许 closest 的关系工作？

Answer 1

问题是您将效果应用于复选框，而您应该将其应用于表格单元格。尝试这样做。您找到复选框，然后将效果应用于复选框所在的 TD。

if($('#q1c').is(':checked')) { 
    $(this).closest('td').effect("highlight", {color: 'green'}, 1000);
    $(this).closest('td').addClass("selected");
}

编辑:

this 不能在这里使用，因为它指的是 window 并且没有最接近的。已更改为您需要最接近元素的 id。

if ($('#q1c').prop('checked')) {
    $('#q1c').closest('td').effect("highlight", {color: 'green'}, 1000);
    $('#q1c').closest('td').addClass("selected");
}