ตัวอย่างนี้เป็นแนวทางเท่านั้น การประยุกต์ใช้งานเพิ่มเติม จำเป็น
ต้องอาศัยความเข้าใจอื่นๆ ประกอบ
รูปแบบหน้าตา คือ จะมีตาราง ของชุดข้อมูล
โดยมีแถว รายการสลับสีพื้นหลังด้วย css คลาส ชื่อ row_css1 และ row_css2
และเมื่อมีการเลือกแถวรายการใดๆ ก็จะทำการ เปลี่ยนสีของแถวที่ถูกเลือก ด้วย
css คลาส ชื่อ hiligh_select_row
วิธีการทดสอบ ติ๊กเลือกรายการที่ 2 เป็นรายการแรก แล้ว กด shift ที่ คีบอร์ตค้างไว้
พร้อมกับ ติ้กเลือกรายการที่ 5 แบบนี้เป็นต้น
ตัวอย่าง
โค้ดทดสอบทั้งหมด คำอธิบาย แสดงในโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.row_css1{
background-color:#f4f2f5;
}
.row_css2{
background-color:#f2e8f5;
}
.row_css1:hover,
.row_css2:hover{
background-color:#EAEAEA;
}
.hiligh_select_row{
background-color: #9DFFBD;
}
.hiligh_select_row:hover{
background-color: #9DFFBD;
}
</style>
</head>
<body>
<div style="margin:auto;width:80%;">
<br />
<form id="form_test_shift_checkbox" name="form_test_shift_checkbox" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="30" height="25" align="center" bgcolor="#D6D6D6"><input name="check_all_item" type="checkbox" id="check_all_item" value="1" /></td>
<td width="30" height="25" align="center" bgcolor="#D6D6D6">#</td>
<td height="25" bgcolor="#D6D6D6"> Topic</td>
</tr>
<?php
for($i=1;$i<=10;$i++){
?>
<tr id="IDrow<?=$i?>" class="<?=($i%2==0)?"row_css1":"row_css2"?>">
<td width="30" height="25" align="center">
<input name="my_checkbox[]" type="checkbox" id="my_checkbox[]" class="css_my_checkbox" onclick="toggle_class('<?=$i?>');" value="<?=$i?>" />
</td>
<td width="30" height="25" align="center"><?=$i?></td>
<td height="25"> Data <?=$i?></td>
</tr>
<?php }?>
</table>
</form>
<br />
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// เมื่อ checkbox คลาส css_my_checkbox ถูกติ๊ก
$(".css_my_checkbox").click(function(e){
// ตรวจสอบถ้าปุ่ม shift ถูกกดอยู่
if(e.shiftKey){
// เก็บค่า ลำดับของ checkbox ที่ถูกติ๊กเลือก
var nowID_chk=$(".css_my_checkbox").index(this);
// กำหนดตัวแปร เก็บค่าลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
var first_index_check=null;
// วนลูปหา ค่า ลำดับ chexbox ก่อนหน้าที่ถูกติ๊กเลือก
$(".css_my_checkbox:lt("+nowID_chk+")").each(function(i,k){
// เริ่มเก็บค่า ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก เฉพาะรายการที่ถูกติ้กเท่านั้น
if($(".css_my_checkbox:eq("+i+")").prop("checked")==true){
// เก็บค่าไว้ในตัวแปร
first_index_check=i;
}
});
// ถ้ามีค่า ลำดับ checkbox ก่อนหน้าที่ถูกเลือก และไม่อยู่ติดกัน
if(first_index_check!=null && nowID_chk-first_index_check>1){
// กำหนดตัวแปร เก็บค่า ลำดับต่อจาก ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
var nextToCheck=first_index_check+1;
// วนลูปทำงานเลือกเฉพาะ checkbox ที่ยังไม่ถูกเลือก
for(i=nextToCheck;i<nowID_chk;i++){
// เก็บค่าสำหรับ อ้างอิงลำดับแถวของตาราง
var rowID=$(".css_my_checkbox:eq("+i+")").val();
// เปลี่ยนสีพื้นหลัง เป็นรายการที่ถูกเลือก
toggle_class(rowID);
// กำหนด checkbox ตามเงื่อนไข ให้ถูกติ้กเลือกทั้งหมด
$(".css_my_checkbox:eq("+i+")").prop("checked",true);
}
}
}
});
$("#check_all_item").click(function(){
var i_check=$(this).prop("checked");
if(i_check==true){
$(".row_css1,.row_css2").addClass("hiligh_select_row");
$(".css_my_checkbox").prop("checked",true);
}else{
$(".row_css1,.row_css2").removeClass("hiligh_select_row");
$(".css_my_checkbox").prop("checked",false);
}
});
});
</script>
<script type="text/javascript">
function toggle_class(rowID){
var placeRow="IDrow"+rowID;
$("#"+placeRow).toggleClass("hiligh_select_row");
}
</script>
</body>
</html>
ตัาอย่างการใช้งาน กรณีประยุกต์อ้างอิงกับข้อมูลในฐานข้อมูล
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
.row_css1{
background-color:#f4f2f5;
}
.row_css2{
background-color:#f2e8f5;
}
.row_css1:hover,
.row_css2:hover{
background-color:#EAEAEA;
}
.hiligh_select_row{
background-color: #9DFFBD;
}
.hiligh_select_row:hover{
background-color: #9DFFBD;
}
</style>
</head>
<body>
<div style="margin:auto;width:80%;">
<br />
<form id="form_test_shift_checkbox" name="form_test_shift_checkbox" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="30" height="25" align="center" bgcolor="#D6D6D6"><input name="check_all_item" type="checkbox" id="check_all_item" value="1" /></td>
<td width="30" height="25" align="center" bgcolor="#D6D6D6">#</td>
<td height="25" bgcolor="#D6D6D6"> Topic</td>
</tr>
<?php
// row_id คือ primary key ของชุดมูลที่เราจะใช้อ้างอิง
$i=1;
$q="SELECT * FROM table_a ORDER BY row_id LIMIT 10 ";
$qr-mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<tr id="IDrow<?=$rs['row_id']?>" class="<?=($i%2==0)?"row_css1":"row_css2"?>">
<td width="30" height="25" align="center">
<input name="my_checkbox[]" type="checkbox" id="my_checkbox[]" class="css_my_checkbox" onclick="toggle_class('<?=$rs['row_id']?>');" value="<?=$rs['row_id']?>" />
</td>
<td width="30" height="25" align="center"><?=$i?></td>
<td height="25"> Data <?=$rs['row_id']?></td>
</tr>
<?php $i++; }?>
</table>
</form>
<br />
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// เมื่อ checkbox คลาส css_my_checkbox ถูกติ๊ก
$(".css_my_checkbox").click(function(e){
// ตรวจสอบถ้าปุ่ม shift ถูกกดอยู่
if(e.shiftKey){
// เก็บค่า ลำดับของ checkbox ที่ถูกติ๊กเลือก
var nowID_chk=$(".css_my_checkbox").index(this);
// กำหนดตัวแปร เก็บค่าลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
var first_index_check=null;
// วนลูปหา ค่า ลำดับ chexbox ก่อนหน้าที่ถูกติ๊กเลือก
$(".css_my_checkbox:lt("+nowID_chk+")").each(function(i,k){
// เริ่มเก็บค่า ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก เฉพาะรายการที่ถูกติ้กเท่านั้น
if($(".css_my_checkbox:eq("+i+")").prop("checked")==true){
// เก็บค่าไว้ในตัวแปร
first_index_check=i;
}
});
// ถ้ามีค่า ลำดับ checkbox ก่อนหน้าที่ถูกเลือก และไม่อยู่ติดกัน
if(first_index_check!=null && nowID_chk-first_index_check>1){
// กำหนดตัวแปร เก็บค่า ลำดับต่อจาก ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
var nextToCheck=first_index_check+1;
// วนลูปทำงานเลือกเฉพาะ checkbox ที่ยังไม่ถูกเลือก
for(i=nextToCheck;i<nowID_chk;i++){
// เก็บค่าสำหรับ อ้างอิงลำดับแถวของตาราง
var rowID=$(".css_my_checkbox:eq("+i+")").val();
// เปลี่ยนสีพื้นหลัง เป็นรายการที่ถูกเลือก
toggle_class(rowID);
// กำหนด checkbox ตามเงื่อนไข ให้ถูกติ้กเลือกทั้งหมด
$(".css_my_checkbox:eq("+i+")").prop("checked",true);
}
}
}
});
$("#check_all_item").click(function(){
var i_check=$(this).prop("checked");
if(i_check==true){
$(".row_css1,.row_css2").addClass("hiligh_select_row");
$(".css_my_checkbox").prop("checked",true);
}else{
$(".row_css1,.row_css2").removeClass("hiligh_select_row");
$(".css_my_checkbox").prop("checked",false);
}
});
});
</script>
<script type="text/javascript">
function toggle_class(rowID){
var placeRow="IDrow"+rowID;
$("#"+placeRow).toggleClass("hiligh_select_row");
}
</script>
</body>
</html>
