基尼而絲(G.N.A.S)的大世界

change color of checkbox when checked using jQuery

點選checkbox後讓底框變色 kinomelma

<script src="scripts/jquery.min.js" type="text/javascript"></script>

CSS語法：

<style type="text/css">
<!--
/* checkbox處理底框變色 */

td.highlight {
width: 100px;
height: 46px;
background-color: #ffff99;
}
-->
</style>

HTML語法：

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="6%" align="center">1</td>
<td width="47%">
<input type="checkbox" name="order_ck[]" value="1" />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td valign="top" class="wd_font_06">xxxxxxx
</td>
</tr>
<tr>
<td valign="top">備註： <br />
<textarea name="notes[]" cols="20" rows="3"></textarea>
</td>
</tr>
</table>
</td>
<td width="47%">
<input type="checkbox" name="order_ck[]" value="2" />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td valign="top" class="wd_font_06">xxxxxxx
</td>
</tr>
<tr>
<td valign="top">備註： <br />
<textarea name="notes[]" cols="20" rows="3"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>

PHP語法：

<?php

echo "<pre>";
print_r($order_ck);
echo "</pre>";

?>

jQuery語法：

<SCRIPT language=javascript>

//2014/8/21 kinomelma 處理checkbox點選後讓底框變色
$(function(){
$("input[name='order_ck[]']").click(function() {
//$(this).parent().toggleClass("highlight");//切換背景色彩
if ( $(this).is(':checked') ) {//判斷checkbox是否勾選
$(this).parent().addClass('highlight');//增加CSS樣式
}else{
$(this).parent().removeClass('highlight');//移除CSS樣式
}

});
});
//----

</SCRIPT>