PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การ highlight แถวของ checkbox ที่เลือก ด้วย jQuery

11 October 2013 By


 ตัวอย่างนี้เป็นการใช้งานคำสั่ง prop() ร่วมกับการกำหนด highlight แถว

ในตาราง ที่มี checkbox ที่ถูกคลิกเลือก หรือถูกยกเลิกการเลือก
 
มีเนื้อหาที่คล้ายๆ กันที่ลิ้งค์นี้
 
การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=292 via @ninenik
 
วิธีการ ในการกำหนดก่อนใช้งานคร่าวๆ 
1. แถวที่ต้องการควบคุมสีพื้นหลัง ต้องแทรก class ชื่อเหมือนกัน ในที่นี้ เป็น class="css_tr_data" 
 
 <tr class="css_tr_data" >
 
 
2. checkbox มีการแทรก class ทั้งหมด เหมือนกัน ในที่นี้ เป็น class="css_data_item"
 
<input name="data_item1" type="checkbox" class="css_data_item" id="data_item1" value="1" />
 
 
 
ตัวอย่าง
 
Topic
Data1
Data2
Data3
Data4
 
 
โค้ดทั้งหมด คำอธิบาย แสดงในโค้ด
 
<!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>
</head>

<body>

<div style="margin:auto;">
<form id="form_checkbox1" name="form_checkbox1" method="post" action="">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="2">
<thead>
  <tr>
    <th align="center" bgcolor="#CCFFCC">
    <input type="checkbox" name="css_all_check" id="css_all_check" />  
    </th>
    <th bgcolor="#CCFFCC">Topic</th>
  </tr>
</thead>  
  <tr class="css_tr_data" bgcolor="#E8F4EE">
    <td width="50" align="center">
      <input name="data_item1" type="checkbox" class="css_data_item" id="data_item1" value="1" />
    </td>
    <td>Data1</td>
  </tr>
  <tr class="css_tr_data" >
    <td width="50" align="center">
      <input name="data_item2" type="checkbox"  class="css_data_item" id="data_item2" value="2" />
    </td>
    <td>Data2</td>
  </tr>
  <tr class="css_tr_data" bgcolor="#E8F4EE">
    <td width="50" align="center">
      <input name="data_item3" type="checkbox" class="css_data_item"  id="data_item3" value="3" />
    </td>
    <td>Data3</td>
  </tr>
  <tr class="css_tr_data" >
    <td width="50" align="center">
      <input name="data_item4" type="checkbox" class="css_data_item"  id="data_item4" value="4" />
    </td>
    <td>Data4</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Submit" /></td>
  </tr>      
</table>

</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">  
$(function(){        

	var highlight_bgColor="#A6F83D";	 // กำหนดสี highlight ที่ต้องการ
	$("#css_all_check").click(function(){ // เมื่อคลิกที่ checkbox ตัวควบคุม  
		if($(this).prop("checked")){ // ตรวจสอบค่า ว่ามีการคลิกเลือก  
			$(".css_data_item").prop("checked",true); // กำหนดให้ เลือก checkbox ที่ต้องการ ที่มี class ตามกำหนด   
			$(".css_tr_data").css("background-color",highlight_bgColor); // กำหนดสีพื้นหลังของแถวที่เลือก
		}else{ // ถ้าไม่มีการ ยกเลิกการเลือก  
			$(".css_data_item").prop("checked",false); // กำหนดให้ ยกเลิกการเลือก checkbox ที่ต้องการ ที่มี class ตามกำหนด   			
			$(".css_tr_data").each(function(k_data,v_data){ // วนหลูปแถวที่มี class ชื่อ css_tr_data
				var old_bgColor=$(this).attr("bgcolor");		// เรียกสีพื้นหลังเดิมมาเก็บไว้ในตัวแปร	 		
				old_bgColor=(old_bgColor!=undefined)?old_bgColor:"";	// กำหนดค่าสีพื้นหลังเดิม กรณีไม่มี หรือมีค่า		
				$(this).css("background-color",old_bgColor); // ยกเลือกสีพื้นหลัง หรือกำหนดเป็นค่าเดิม
			});				
		}  
	});     
	  
    $(".css_data_item").click(function(){  // เมื่อคลิก checkbox  ใดๆ  		
		var parentTR=$(this).parents(".css_tr_data");  // หาแถวที่ checkbox นั้นๆที่คลิก อยู่ด้านใน
		var old_bgColor=parentTR.attr("bgcolor"); // เรียกสีพื้นหลังเดิมมาเก็บไว้ในตัวแปร
		old_bgColor=(old_bgColor!=undefined)?old_bgColor:""; // กำหนดค่าสีพื้นหลังเดิม กรณีไม่มี หรือมีค่า
		if($(this).prop("checked")){
			parentTR.css("background-color",highlight_bgColor); // กำหนดสีพื้นหลังของแถวที่เลือกทั้งหมด
		}else{
			parentTR.css("background-color",old_bgColor); // ยกเลือกสีพื้นหลัง หรือกำหนดเป็นค่าเดิม
		}
    });  

    $("#form_checkbox1").submit(function(){ // เมื่อมีการส่งข้อมูลฟอร์ม  
        if($(".css_data_item:checked").length==0){ // ถ้าไม่มีการเลือก checkbox ใดๆ เลย  
            alert("NO");  
            return false;     
        }  
    });  	
  
});  
</script>  

</body>
</html>
 
 
 

Tags:: jquery checkbox highlight javascript





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