通過點擊複選框在TD上添加課程

Question

實際上，我嘗試通過單擊複選框來添加課程。意思是當我點擊複選框時，TD只會突出顯示..說像添加課程。爲了更好地理解手動我把班去年TD

http://jsfiddle.net/upXr8/2/演示

<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.