JS在页面限制checkbox最大复选数
2024-08-31 12:55:30
应该是挺简单的代码, 记录一下分享.
首先最直接的想法就是使用循环, 用局部变量记录已选的checkbox, 达到最大值就将余下的checkbox都禁止选择, 例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS限制checkbox复选框多选</title>
<script language="javascript" type="text/javascript">
function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
var maxChoices = 3;
var flag = 0; for(var i=0; i<items.length; i++)
{
if(items[i].checked)
{
flag ++;
}
}
if(flag >= maxChoices)
{
for(var k=0; k<items.length; k++)
{
if(!items[k].checked)
{
items[k].disabled = true;
}
}
}
else
{
for(var p=0; p<items.length; p++)
{
if(!items[p].checked)
{
items[p].disabled = false;
}
}
}
} function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
var maxChoices = 3; for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("请选择选项再提交");
}
else if(choices > maxChoices)
{
alert("选择选项不能超过 "+ maxChoices + "个");
}
else
{
alert("提交成功");
}
} </script>
</head>
<body >
JS限制checkbox复选框多选
<br><br> <input type="checkbox" value="value1" name="item" onClick="onCheckBox(this);"/> 选项一
<br>
<input type="checkbox" value="value2" name="item" onClick="onCheckBox(this);"/> 选项二
<br>
<input type="checkbox" value="value3" name="item" onClick="onCheckBox(this);"/> 选项三
<br>
<input type="checkbox" value="value4" name="item" onClick="onCheckBox(this);"/> 选项四
<br>
<input type="checkbox" value="value5" name="item" onClick="onCheckBox(this);"/> 选项五
<br><br> <input type="button" id="submit_vote" name="submit_vote" value="提交" onClick="onSubmitVote()" /> </body>
</html>
执行例如以下:
效果是没问题, 但通常第一想法都是比較粗糙的, 好的东西须要加以雕琢. 上面用的的是局部变量, 所以每次进入js的onCheckBox()都是新的变量, 还要循环几次, 但换成全局变量, 每次进入, flag的值都是继续上次操作的值, 那么能够降低循环的次数了. 针对该部分做改动, 例如以下:
<script language="javascript" type="text/javascript">
var maxChoices = 3;
var flag = 0; function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
//var maxChoices = 3;
//var flag = 0; if(checkbox.checked)
{
flag ++;
}
else
{
flag --;
} if(flag < maxChoices)
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = false;
}
}
}
else
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = true;
}
}
} } function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
//var maxChoices = 3; for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("请选择选项再提交");
}
else if(choices > maxChoices)
{
alert("选择选项不能超过 "+ maxChoices + "个");
}
else
{
alert("提交成功");
}
} </script>
这样效果是一样的, 但循环就少一次.
最新文章
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
- jquery Ajax异步请求之session
- 正则表达式:re--python核心编程(3),chapter 1
- CSS :first-child 伪类
- 源码分析-mysql
- STL-算法
- java并发5-volatile关键字解析
- 人生第一场组队赛---2014.8 zju monthly
- Java Web Services (1) - 第1章 Web服务快速入门
- 笔记整理--Linux_Socket
- Go-file
- 微信小程序教程(第三篇)
- 【C++】智能指针详解(一):智能指针的引入
- js随机产生区间数
- 提取DirectShow中视频采集的数据
- Python——合并指定文件夹下的所有excel文件
- sql server management studio 查询的临时文件路径
- 解决IIS7下主机名灰色无法修改问题
- win10 搭建react-native开发环境
- 低危漏洞- X-Frame-Options Header未配置
热门文章
- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别
- Windows 8.1硬盘安装Ubuntu 14.04双系统
- [CSS3] All abourt responsive image
- 微信企业号开发:微信用户信息和web网页的session的关系
- 强名称程序集(strong name assembly)——为程序集赋予强名称
- Android socket 使用PrintWriter和BufferedReader发送和接收出现乱码问题解决
- Android BLE与终端通信(三)——client与服务端通信过程以及实现数据通信
- Eclipse 更新Android SDK后,新建项目出现appcompat_v7project的相关问题
- IE input X 去掉文本框的叉叉和password输入框的眼睛图标
- windowsclient崩溃分析和调试