การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย

ตัวอย่าง

<style type="text/css">
html,body{
	margin:0;
	padding:0;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;	
}
/* css สำหรับแถวคี่ */
.RowOdd{
	background-color:#EAEAEA;		
}
/* css สำหรับแถวคู่ */
.RowEven{
	background-color:#FBFBFB;	
}
</style>

HTML Code ตัวอย่าง
 

<table class="myTable" width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="49" align="center" bgcolor="#CCCCCC"><input name="checkAll" type="checkbox" id="checkAll" value="1" /></td>
    <td width="451" bgcolor="#CCCCCC">Title</td>
  </tr>
    <tr class="RowOdd">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="1" />
	</td>
    <td>Data 1</td>
  </tr>
    <tr class="RowEven">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="2" />
	</td>
    <td>Data 2</td>
  </tr>
    <tr class="RowOdd">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="3" />
	</td>
    <td>Data 3</td>
  </tr>
    <tr class="RowEven">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="4" />
	</td>
    <td>Data 4</td>
  </tr>
    <tr class="RowOdd">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="5" />
	</td>
    <td>Data 5</td>
  </tr>
    <tr class="RowEven">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="6" />
	</td>
    <td>Data 6</td>
  </tr>
    <tr class="RowOdd">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="7" />
	</td>
    <td>Data 7</td>
  </tr>
    <tr class="RowEven">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="8" />
	</td>
    <td>Data 8</td>
  </tr>
    <tr class="RowOdd">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="9" />
	</td>
    <td>Data 9</td>
  </tr>
    <tr class="RowEven">
    <td align="center">
      <input class="myChkBox"  name="Item[]" type="checkbox" id="Item[]" value="10" />
	</td>
    <td>Data 10</td>
  </tr>
    
</table>

Javascript Code ตัวอย่าง
 

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var HilightCSS={
		"background-color":"#FFC"
	}
	var NoHilightCSS={
		"background-color":""
	}	
	$("#checkAll").click(function(){
		var parentTR=$(".RowOdd,.RowEven");
        var statusCheckBox=($(this).attr("checked")=="checked")?true:false;
		$(this).parents(".myTable").find(".myChkBox")
		.attr("checked",statusCheckBox);
		if($(this).attr("checked")=="checked"){
			parentTR.css(HilightCSS);
		}else{
			parentTR.css(NoHilightCSS);
		}
	});
	
	$("input.myChkBox").click(function(){
		var parentTR=$(this).parents(".RowOdd,.RowEven");
		if($(this).attr("checked")=="checked"){
			parentTR.css(HilightCSS);
		}else{
			parentTR.css(NoHilightCSS);
		}
	});
	
});
</script>