ตั้งแต่ 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" />
โค้ดตัวอย่างทั้งหมด
<!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>
