JS在页面限制checkbox最大复选数
来源:互联网 发布:airplay怎么手机连mac 编辑:程序博客网 时间:2024/05/21 17:58
应该是挺简单的代码, 记录一下分享.
首先最直接的想法就是使用循环, 用局部变量记录已选的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>
这样效果是一样的, 但循环就少一次.
0 0
- JS在页面限制checkbox最大复选数
- 限制checkbox复选框的最大可选数量
- 限制checkbox复选框的最大可选数量
- js复选框checkbox
- checkbox复选事件js
- checkbox js----复选框
- JS中获取页面单选框radio和复选框checkbox中当前选中的值
- 关于jsp页面table 实现checkbox复选
- js限制checkbox选中个数
- js checkbox(复选框) 使用集锦
- js 完成checkbox 全选与复选[实例]
- 复选框(checkbox)全选--js代码
- Js获取复选框checkbox的值
- js实现checkbox复选框全选/全不选
- js控制复选框checkbox参考代码
- JS循环创建复选框checkbox
- JS全选,复选框是.net服务器控件checkBox 在GridView中的模板列
- select多选和checkbox复选的值在js和action中的展现形式
- Qt中国象棋
- Android中使用4种方式实现按钮点击操作
- 有关oracle表空间查询的一些记录
- android WebView
- 安卓开发获取当前手机应用信息的方法
- JS在页面限制checkbox最大复选数
- 【Struts2六】ui标签之form标签及数据回显
- UITextView不可编辑——被userInteractionEnabled坑了
- Android 下拉刷新控件的使用
- 链表的创建、查询、删除,插入;
- asp.net 文件说明--Global.asax
- VC枚举计算机串口资料(非注册表方法)
- android 调用 Menu 两种方法
- JAVA学习第三天