PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

09 October 2013 By
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>
 
 






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






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


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