กำหนดค่าให้สามารถเลือก 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/

คุณอาจสนใจ
ตรวจสอบวันที่ย้อนหลัง - เดินหน้า
Mr.GuruZ (50,326 - 03 มิ.ย. 49)
เทคนิคการใส่จุลภาค คั่นตัวเลข
Mr.GuruZ (30,019 - 03 มิ.ย. 49)
การคัดลอกรูปแบบในแถบเซลล์
Mr.x (33,590 - 03 ก.ย. 50)
การเชื่อมข้อความหลายข้อความ
Mr.GuruZ (42,406 - 03 มิ.ย. 49)
สร้างข้อความพลาสติก
langjuko (244,778 - 24 ก.ย. 51)
การใช้งานคำสั่ง Selection
first (22,239 - 02 เม.ย. 51)
การใช้คำสั่งวนลูป while
Mr.GuruZ (32,086 - 03 มิ.ย. 49)
ทำอัลบั้มภาพออนไลน์แบบเด็ดๆ ด้วย PhotoShop 7.0
Ms. Kanittha S. : writer@maildozy.com (68,411 - 23 ธ.ค. 50)