การทำปุ่ม 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. ขอให้สนุกกับการทำเว็บ

คุณอาจสนใจ
เร่งสปีด XP ด้วยเทคโนโลยี Vista?
เว็บไทยดีดี (13,544 - 29 ก.ย. 50)
คำอธิบาย error ที่เกี่ยว PHP ที่มักจะพบกันบ่อย ๆ
first (43,225 - 21 ม.ค. 51)
เทคนิคการลบพื้นหลัง
Mr.GuruZ (149,999 - 04 มิ.ย. 49)
การกำหนดภาษาไทยใน Namo Webeditor
Mr.GuruZ (26,506 - 26 พ.ย. 50)
การเข้ารหัส base64_encode และการถอดรหัส base64_decode
Zerohate (32,793 - 23 ธ.ค. 50)
ใส่โลโก้ตัวเองให้กับ Windows XP
สายลม (19,019 - 05 เม.ย. 51)
การใช้ปุ่มสำเร็จรูป
Mr.Mean (48,010 - 04 มิ.ย. 49)
การเขียน โปรแกรมสร้าง Link List ด้วยภาษา C
langjuko (55,235 - 19 ก.ย. 51)