การทำ Link ให้ Checkbox ไม่เลือกและเลือกทั้งหมด จัดทำโดย : เว็บไทยดีดี พิมพ์
 การทำ Link ให้ Checkbox ไม่เลือกและเลือกทั้งหมด

บทความนี้การทำ Link ที่ทำให้ Checkbox ไม่เลือกและเลือกทั้งหมดครับที่เหมือนกับ Mail ของ yahoo.com นะครับซึ่งหลายคงอยากรู้ทำกันยังไง มาทำกันเลยครับ

ขั้นตอนการทำ

1. สร้างไฟล์ demo.html เพื่อใช้ในการทดสอบ Script นะครับ แล้ว copy function javascript ด้านล่างนี้ เอาไว้ที่ tag <head> </head> นะครับ

<script>
   function checkall(formname,checkname,thestate){
     var el_collection=eval("document.forms."+formname+"."+checkname)
     for (c=0;c<el_collection.length;c++)
     el_collection[c].checked=thestate
   }
</script>

หลังจาก copy function javascript มาวางไว้ที่ tag <head> </head> แล้วนะครับ จะต้องเหมือนกับ code ด้านล่างนะครับ

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การทำ Link ให้ Checkbox ไม่เลือกและเลือกทั้งหมด</title>

<script>
   function checkall(formname,checkname,thestate){
     var el_collection=eval("document.forms."+formname+"."+checkname)
     for (c=0;c<el_collection.length;c++)
     el_collection[c].checked=thestate
   }
</script>

</head>

<body>

</body>
</html>

2. หลังจากนั้นเรามาสร้าง Form ตั้งชื่อ Form ว่า "test" ซึ่งประกอบไปด้วย checkbox ที่จะใช้จำนวน 5 checkbox ตั้งชื่อ checkbox ว่า "v1" ตามรูปด้านล่าง

3. หลังจากนั้นเราก็มาทำ link กันครับ

<a href="javascript:checkall('test','v1',true)">เลือกทั้งหมด</a> // เป็นการให้ function javascript เลือกทั้งหมด

<a href="javascript:checkall('test','v1',false)">เอาออกทั้งหมด</a> // เป็นการให้ function javascript ไม่เลือกทั้งหมด

4. เสร็จแล้วครับ ลองเอาไปลองทำดูนะครับน่าจะมีประโยชน์บ้างนะครับ

คลิกดูตัวอย่าง

คุณอาจสนใจ
การ copy เฉพาะรูปแบบเซลล์ไปตกแต่งที่อื่น
หมูขุน (40,159 - 18 มิ.ย. 51)
การทำปฎิทินด้วย Java Script
nut (40,833 - 07 มี.ค. 51)
การเปลี่ยนสี Web Title จาก Template
Mr.GuruZ (46,412 - 04 มิ.ย. 49)
คำสั่ง break และ continue
Mr.POP (37,035 - 05 พ.ย. 49)
การสร้างปฏิทิน Online
first (90,656 - 23 ธ.ค. 50)
เรื่องเล็กน้อยแต่น่ารู้ไว้ของเมนู Start (XP)
เว็บไทยดีดี (13,330 - 29 ก.ย. 50)
แนะนำเครื่องมือใหม่ Adobe Dreamweaver CS3
Mr.GuruZ (185,213 - 10 พ.ค. 51)
การใช้ Callouts
หมูขุน (15,806 - 04 ก.พ. 50)