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