กำหนดเลือกทั้งหมด checkbox กับการใช้งาน prop() ของ jQuery 1.6 ขึ้นไป
เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdeejquery checkbox เลือกทั้งหมด javascript
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery checkbox เลือกทั้งหมด javascript
ไปที่
Copy
ตั้งแต่ 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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

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