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

11 October 2013 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

javascript highlight checkbox jquery

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

ตัวอย่างนี้เป็นการใช้งานคำสั่ง 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" />

ตัวอย่าง

โค้ดทั้งหมด คำอธิบาย แสดงในโค้ด

<!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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ