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

คุณอาจสนใจ
การใช้คำสั่ง do while
Mr.POP (58,201 - 05 พ.ย. 49)
สร้างไอคอน RSS แบบสามมิติ โดยใช้ Illusrtrator
langjuko (49,609 - 24 ก.ย. 51)
การสร้าง site ให้กับ Dream
Mr.GuruZ (57,016 - 04 มิ.ย. 49)
Constructor Method
Mr.POP (55,786 - 05 พ.ย. 49)
การทำ หมายเหตุ ให้แสดงขึ้นมาอย่างง่าย ๆ
เฟริสท์ (22,265 - 29 ม.ค. 51)
นามบัตรส่วนตัว ฟรีสไตล์ไม่เหมือนใคร
ธนิศา ไชยภูริพัฒน (82,354 - 19 ม.ค. 51)
รูป Icon ของ Recycle Bin หรือ Icon อื่นๆ เปลี่ยนไป
เว็บไทยดีดี (16,264 - 28 ก.ค. 50)
การกำหนดขนาดตัวอักษรโดยใช้ Css Style
Mr.GuruZ (24,565 - 26 พ.ย. 50)