กำหนดค่าให้สามารถเลือก checkbox ได้ตามที่เรากำหนด จัดทำโดย : เว็บไทยดีดี พิมพ์
 แสดง Loading ที่ Status Bar

บทความนี้การทำ Java Script ที่ทำการกำหนดค่าให้สามารถเลือก check ค่าใน checkbox ได้เท่าไหร่ครับ เป็น Script ที่ไม่ยากครับ

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

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

<script type="text/javascript">
 function checkboxlimit(checkgroup, limit){
   var checkgroup=checkgroup
   var limit=limit
   for (var i=0; i<checkgroup.length; i++){
      checkgroup[i].onclick=function(){
      var checkedcount=0
      for (var i=0; i<checkgroup.length; i++)
        checkedcount+=(checkgroup[i].checked)? 1 : 0
      if (checkedcount>limit){
         alert("คุณสามารถเลือกได้ไม่เกิน "+limit+" หัวข้อครับ") // กำหนดข้อความที่ต้องการให้ Alert เตือน
         this.checked=false
         }
      }
   }
}
</script>

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

<html>
<head>

<script type="text/javascript">
 function checkboxlimit(checkgroup, limit){
   var checkgroup=checkgroup
   var limit=limit
   for (var i=0; i<checkgroup.length; i++){
      checkgroup[i].onclick=function(){
      var checkedcount=0
      for (var i=0; i<checkgroup.length; i++)
        checkedcount+=(checkgroup[i].checked)? 1 : 0
      if (checkedcount>limit){
         alert("คุณสามารถเลือกได้ไม่เกิน "+limit+" หัวข้อครับ") // กำหนดข้อความที่ต้องการให้ Alert เตือน
         this.checked=false
         }
      }
   }
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>สุ่มรหัสผ่าน</title>
</head>

<body>
</body>
</html>

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

3. และใส่ Java Script นี้ที่ท้าย Form ครับ

<script type="text/javascript">
    //กำหนดค่าที่จะให้สามารถเลือก Checkbox ได้เท่าไหร่ ในที่นี้ผมได้กำหนดไว้ให้เลือกได้ 2 Checkbox ครับ
    checkboxlimit(document.forms.article_test.article, 2)
</script>

4. เสร็จแล้วครับ พอเราคลิกเลือกที่ Checkbox เกินกว่าที่เรากำหนดก็จะแสดง Alert แจ้งขึ้นมาครับตามรูปด้านล่างครับ

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

ข้อมูลจาก : http://javascriptkit.com/

คุณอาจสนใจ
เรื่องเล็กน้อยแต่น่ารู้ไว้ของเมนู Start (XP)
เว็บไทยดีดี (13,330 - 29 ก.ย. 50)
ทริคไม่ยาก สร้างข้อความรูปภาพยืนยันตอน Login
อ้ายคำปัน (80,262 - 22 ก.ย. 49)
การระบายสีภาำพโดยใช้เครื่องมือ Brush Tool
น้องฝ้าย (74,992 - 22 ก.ย. 50)
ชอร์ตคัตสำหรับรีสตาร์ต (WinXP)
เว็บไทยดีดี (17,517 - 10 พ.ค. 51)
การใช้ Callouts
หมูขุน (15,817 - 04 ก.พ. 50)
การทำ Rollover Image
Mr.GuruZ (45,978 - 04 มิ.ย. 49)
การปรับแต่งรอยมาร์คเพื่อการตัด(ต่อจากเรื่องนามบัตร)
Lek (44,230 - 27 มิ.ย. 49)
การแสดงรูปแบบวันที่
nutthapon (37,841 - 02 ก.ค. 49)