PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


ประยุกต์ jQuery กับการเลือก checkbox หลายอันพร้อมกัน อย่างง่าย

23 June 2014 By
checkbox jquery


ตัวอย่างนี้เป็นแนวทางเท่านั้น การประยุกต์ใช้งานเพิ่มเติม จำเป็น
ต้องอาศัยความเข้าใจอื่นๆ ประกอบ
 
รูปแบบหน้าตา คือ จะมีตาราง ของชุดข้อมูล
โดยมีแถว รายการสลับสีพื้นหลังด้วย css คลาส ชื่อ row_css1 และ row_css2
 
และเมื่อมีการเลือกแถวรายการใดๆ ก็จะทำการ เปลี่ยนสีของแถวที่ถูกเลือก ด้วย
css คลาส ชื่อ hiligh_select_row
 
 
วิธีการทดสอบ ติ๊กเลือกรายการที่ 2 เป็นรายการแรก แล้ว กด shift ที่ คีบอร์ตค้างไว้
พร้อมกับ ติ้กเลือกรายการที่ 5 แบบนี้เป็นต้น
ตัวอย่าง


#  Topic
1   Data 1
2   Data 2
3   Data 3
4   Data 4
5   Data 5
6   Data 6
7   Data 7
8   Data 8
9   Data 9
10   Data 10



 
โค้ดทดสอบทั้งหมด คำอธิบาย แสดงในโค้ด
 
<!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">&nbsp;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">&nbsp; 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">&nbsp;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">&nbsp; 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>






Tags:: jquery checkbox






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง