js控制多选框选中个数效果

8个月前 (03-30 11:14)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

通过js来限制多选框最多可选中个数,选中个数超过之后其他选项变灰无法选择,可根据自己的需求来自定义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>js控制多选框选中个数效果_武鸣人</title>
<script type="text/javascript">
function checkbox_max(obj,max_num) {
   var form1 = document.getElementById('form1');
   var this_name_array = document.getElementsByName(obj.id);
   /*IE ok \ FF ok*/
   //var name1 = document.getElementsByName(obj.id+"[1]");
   var auto_num = 1;
   var element_length = 0 ;
   while(document.getElementsByName(obj.id+"["+ auto_num +"]").length > 0) {
    document.getElementsByName(obj.id+"["+ auto_num +"]")[0].disabled = "";
    if(document.getElementsByName(obj.id+"["+ auto_num +"]")[0].checked) {
     element_length++;
    }
    auto_num++;
   }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
   var auto_num = 1;
   if(element_length >= max_num) {
    while(document.getElementsByName(obj.id+"["+ auto_num +"]").length > 0) {
     if(!document.getElementsByName(obj.id+"["+ auto_num +"]")[0].checked) {
      document.getElementsByName(obj.id+"["+ auto_num +"]")[0].disabled = "disabled";
     }
    auto_num++;
    }
   }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
   if(element_length > max_num) {
    obj.checked = false;
    var auto_num = 1;
    alert("最多只能选择"+ max_num +"项!");
   }
   /*IE ok \ FF ok end*/
   /*IE ok \ FF no
   if(this_name_array.length > max_num) {
    var check_num = 0;
    for(var i=0; i<this_name_array.length; i++) {
     if(this_name_array[i].checked) {
      check_num++;
     }
    }
    if(check_num > 3) {
     obj.checked = false;
     alert("最多只能选择"+ max_num +"项!");
    }
   }
   */
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<form id="form1" name="form1" method="post" action="">
您觉得武鸣人的哪些内容最有特色(最多可以选择三项):<br>
<input type="checkbox" name="o[4][1]" value="1" id="o[4]" onclick="checkbox_max(this,3);">js特效代码<br>
<input type="checkbox" name="o[4][2]" value="1" id="o[4]" onclick="checkbox_max(this,3);">广告代码<br>
<input type="checkbox" name="o[4][3]" value="1" id="o[4]" onclick="checkbox_max(this,3);">武鸣人<br>
<input type="checkbox" name="o[4][4]" value="1" id="o[4]" onclick="checkbox_max(this,3);">在线生成<br>
<input type="checkbox" name="o[4][5]" value="1" id="o[5]" onclick="checkbox_max(this,3);">网页特效<br>
</form>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/558.html

回帖

js控制多选框选中个数效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息