การ highlight แถวของ checkbox ที่เลือก ด้วย jQuery
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeejavascript highlight checkbox jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ javascript highlight checkbox jquery
ไปที่
Copy
ตัวอย่างนี้เป็นการใช้งานคำสั่ง 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"> </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 สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()