บทความนี้การทำ 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/