การทำปุ่ม Select All Checkbox .. จัดทำโดย : Mr.GuruZ พิมพ์
 Un title page

Un title page การทำปุ่ม Select All Checkbox .. หลายๆ คนถามมาก็เลยนำมาเขียนบทความให้ศึกษากัน การทำลักษณะนี้จะช่วยอำนวยความสะดวกให้กับผู้ใช้เว็บ ทำให้สามารถเลือกรายการของ หรือสินค้าได้ง่ายขึ้น ส่วนการส่งค่าลองศึกษาในเรื่อง PHP นะครับอันนี้เป็นการสร้าง Form อย่างเดียว มาดูขั้นตอนการทำกันเลย

ขั้นตอนการทำ
1. เปิดเอกสารสร้าง Form โดยมี Checkbox ตามแต่เราต้องการ และปุ่มที่ใช้ Select All 1 ปุ่ม ตั้งชื่อให้กับ Form ว่า messageList

2. หลังจากนั้นให้นำโค้ด Java ไปวางในส่วนของ Head ในโค้ด HTML

โค้ด Java

<script language=JavaScript type=text/javascript>
<!--
function CheckAll() {
for (var i = 0; i < document.messageList.elements.length; i++) {
if(document.messageList.elements[i].type == 'checkbox'){
document.messageList.elements[i].checked = !(document.messageList.elements[i].checked);
}
}
}
//-->
</script>

3. หลังจากนั้นให้เขียนโค้ดที่ปุ่ม Select All เพื่อเรียกใช้ Function CheckAll

<input type="button" name="Button" value="Select All" onClick=CheckAll();>

4. หลังจากนั้นลองทดสอบ หลังจากที่เรากดที่ปุ่ม Select All

5. ถ้าใครงงดูโค้ดทั้งหมดที่นี่

<html>
<head>
<title>Un title page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type="text/css">
<!--
body { margin: 0px 0px; padding: 0px 0px}
a:link { color: #005CA2; text-decoration: none}
a:visited { color: #005CA2; text-decoration: none}
a:active { color: #0099FF; text-decoration: underline}
a:hover { color: #0099FF; text-decoration: underline}
-->
</style>
<script language=JavaScript type=text/javascript>
<!--
function CheckAll() {
for (var i = 0; i < document.messageList.elements.length; i++) {
if(document.messageList.elements[i].type == 'checkbox'){
document.messageList.elements[i].checked = !(document.messageList.elements[i].checked);
}
}
}
//-->
</script>

</head>

<body bgcolor="#FFFFFF">
<form name="messageList" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
A<br>
<input type="checkbox" name="checkbox" value="checkbox">
B<br>
<input type="checkbox" name="checkbox" value="checkbox">
C<br>
<input type="checkbox" name="checkbox" value="checkbox">
D<br>
<input type="checkbox" name="checkbox" value="checkbox">
E <br>
&nbsp;เลือกรายการทั้งหมด
<input type="button" name="Button" value="Select All" onClick=CheckAll();>
</form>

</body>
</html>

6. ขอให้สนุกกับการทำเว็บ

คุณอาจสนใจ
การทำเงาให้กับตัวอักษร
สายลม (112,366 - 04 มิ.ย. 49)
การรับข้อมูลทางแป้นพิมพ์โดยใช้คลาสของ stream
Mr.POP (35,837 - 05 พ.ย. 49)
ส่วนประกอบของ Excel 2002 (XP)
Mr.GuruZ (38,197 - 30 ม.ค. 50)
ใส่โลโก้ตัวเองให้กับ Windows XP
สายลม (19,019 - 05 เม.ย. 51)
โครงสร้างของภาษา HTML
สายลม (53,676 - 26 ธ.ค. 49)
5 วิธีถนอมธัมบ์ไดร์ฟสุดรัก
เว็บไทยดีดี (20,172 - 28 ก.ค. 50)
การทำ Caution Bar
Black-Hawk (65,327 - 25 ม.ค. 51)
การทำ Floating Menu
เว็บไทยดีดี (24,192 - 19 ม.ค. 51)