กำหนดเลือกทั้งหมด checkbox กับการใช้งาน prop() ของ jQuery 1.6 ขึ้นไป

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

javascript checkbox เลือกทั้งหมด jquery

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

ตั้งแต่ jQuery 1.6 เป็นต้นมา พบว่า การใช้งาน คำสั่ง attr()

จะคืนค่า เป็น undefined เมื่อ attributes นั้นไม่มีการกำหนดค่า

และให้ใช้คำสั่ง prop() แทน

เช่น การรับค่าหรือเปลี่ยนแปลงค่า checked, selected หรือ disabled เป็นต้น

โดยความแตกต่างที่เห็นได้ชัด คือ คำสั่ง

attr() ใช้สำหรับ Attributes (ถ้าใช้กับ properties จะคืนค่า เป็น undefined เมื่อ attributes นั้นไม่มีการกำหนดค่า)

prop() ใช้สำหรับ Properties

โดยส่วนตัวยังไม่เข้าใจแน่ชัด ระหว่าง Attributes กับ Properties ว่าแตกต่างกันแบบไหน

เน้นใช้ประโยชน์ไปก่อน

ตัวอย่าง การเลือก หรือไม่เลือก checkbox ทั้งหมด ด้วยคำสั่ง prop()

วิธีการ ทำตามขั้นตอนคร่าวๆ ประมาณนี้

1. กำหนด id ให้ กับตัวเลือก หรือ ไม่เลือก ทั้งหมด ในทีนี้กำหนด tag checkbox id เท่ากับ

id="css_all_check" สำหรับใช้อ้างอิง และเรียกใช้งานผ่าน jQuery

<input type="checkbox" name="css_all_check" id="css_all_check" />

2. กำหนด class ให้กับ checkbox ที่ต้องการให้ทำงาน เมื่อเลือก หรือไม่เลือก checkbox

ตามข้อที่ 1 ในที่นี้ กำหนด class="css_data_item" ให้กับ checkbox ที่ต้องการ

<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="#FFFFCC"><input type="checkbox" name="css_all_check" id="css_all_check" /></th>
    <th bgcolor="#FFFFCC">Topic</th>
  </tr>
</thead>  
  <tr>
    <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>
    <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>
    <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>
    <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>      
</table>

</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">  
$(function(){        
	  $("#css_all_check").click(function(){ // เมื่อคลิกที่ checkbox ตัวควบคุม
		  if($(this).prop("checked")){ // ตรวจสอบค่า ว่ามีการคลิกเลือก
			  $(".css_data_item").prop("checked",true); // กำหนดให้ เลือก checkbox ที่ต้องการ ที่มี class ตามกำหนด 
		  }else{ // ถ้าไม่มีการ ยกเลิกการเลือก
			  $(".css_data_item").prop("checked",false); // กำหนดให้ ยกเลิกการเลือก checkbox ที่ต้องการ ที่มี class ตามกำหนด 
		  }
	  });      
});  
</script>  

</body>
</html>

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

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

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