checkbox.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title>jQuery 1.6 チェックしたチェックボックスの背景の色を変更する</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6");</script>
<script language="JavaScript" type="text/javascript">
<!--
$(window).load(function(){
var bgcolor = 'red';
$(":checked").closest('td').css('background', bgcolor);
$("input[type='checkbox']").change(function(){
if($(this).is(":checked")){
$(this).closest('td').css('background', bgcolor);
}else{
$(this).closest('td').css('background', '');
}
});
});
//-->
</script>
</head>
<body>
<table border=1>
<tr>
<td>
<input type="checkbox" name="checkbox1">a
</td>
<td>
<input type="checkbox" name="checkbox2" checked>b
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox3">c
</td>
<td>
<input type="checkbox" name="checkbox4">d
</td>
</tr>
</table>
</body>
</html>
注意すべきこと
jQueryのバージョンによっては、動かなくなる場合あり
参考にしたページ
http://www.finefinefine.jp/jquery/kiji1420
http://kachibito.net/snippets/change-check-box-bg-color
http://www.detelu.com/blog/sample/jQuery/checkbox/index.html
http://jsfiddle.net/uJcB7/
http://tech.ironhearts.com/blog/archives/148
http://nob-log.info/2012/08/17/jquery-closest/