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

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
checkbox jquery highlight javascript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ checkbox jquery highlight javascript



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

ในตาราง ที่มี checkbox ที่ถูกคลิกเลือก หรือถูกยกเลิกการเลือก
 
มีเนื้อหาที่คล้ายๆ กันที่ลิ้งค์นี้
 
การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย
 
วิธีการ ในการกำหนดก่อนใช้งานคร่าวๆ 
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>
 
 
 


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











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ