Question

实际上我正在尝试通过单击复选框添加类。意思是当我单击复选框那一刻TD只突出显示..说像添加类。为了更好地理解我将课程放在最后TD上

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="common">
  <tr>
    <td>End Market IT KPI Dashboard</td>
    <td><input type="checkbox" name="checkbox" id="checkbox" /></td>
    <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
  </tr>
  <tr>
    <td>IT Services Report </td>
    <td><input type="checkbox" name="checkbox2" id="checkbox" /></td>
    <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
  </tr>
  <tr>
    <td>Incident &amp; Problem Ticket Details Report </td>
    <td><input type="checkbox" name="checkbox2" id="checkbox" /></td>
    <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
  </tr>
  <tr>
    <td>Change &amp; Request Ticket Details Report </td>
    <td class="highlight"><input type="checkbox" name="checkbox2" id="checkbox" /></td>
    <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
  </tr>
</table>

JS

$(".common").change(function() {
    $(this).closest('td').addClass("highlight", this.checked);
});

CSS

.highlight { background: red;}
td.highlight {background: red;}

Answer 1

改为使用.on('click', 'input:checkbox')：

// catch every click on a checkbox, localized into .common
$(".common").on('click', 'input:checkbox', function() {
    $(this).closest('td').toggleClass('highlight', this.checked);
});
// initialization
$('.common input:checkbox:checked').closest('td').addClass('highlight');

JSFiddle

Answer 2

使用toggleClass()

$(this).closest('.td').toggleClass("highlight", this.checked);

复选框选择器

$('.common input:checkbox').change(function () {
    $(this).closest('td').toggleClass("highlight", this.checked);
});

演示：Fiddle

Answer 3

写：

$(".common input[type='checkbox']:checked").each(function(){
        $(this).closest('td').addClass("highlight");
});
$(".common input[type='checkbox']").change(function() {    
    if($(this).is(":checked")){
        $(this).closest('td').addClass("highlight");
    }
    else{
        $(this).closest('td').removeClass("highlight");
    }    
});

Updated fiddle here.

通过单击复选框在TD上添加类

3 个答案: