javascript限制复选框最多选中几项

最新推荐文章于 2021-11-22 14:11:50 发布

啊哈前端

最新推荐文章于 2021-11-22 14:11:50 发布

阅读量950

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/wuzhe128520/article/details/50462308

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>限制复选框最多选几项</title>
</head>
<body>
<p>
    最多选中<select id="choosenum" οnchange="change(this)">
        <option value="a" selected>1</option>
        <option value="b">2</option>
        <option value="c">3</option>
        <option value="d">4</option>
        <option value="e">5</option>
        <option value="f">6</option>
    </select>项
</p>
<p>
    <input type="checkbox" name="checkmost">
    <input type="checkbox" name="checkmost">
    <input type="checkbox" name="checkmost">
    <input type="checkbox" name="checkmost">
    <input type="checkbox" name="checkmost">
    <input type="checkbox" name="checkmost">
</p>
<script>
    var  maxnum=1,num= 0,checkboxs=document.getElementsByName("checkmost"),
         alength=checkboxs.length,choosenum=document.getElementById("choosenum");
   window.οnlοad=function(){
       for(var i=0;i<alength;i++){
           checkboxs[i].οnclick=function(){
               if(this.checked){
                   if(num==maxnum||num>maxnum){
                       return false;
                   }
                   num++;
               }
               else {
                   num--;
               }
           }
       }
   }
   function change(that){
       var selectindex=that.selectedIndex;//获得是第几个被选中了
       var selectText =that.options[selectindex].text; //获取options中间的文本值
       for(var i=0;i<alength;i++){
           checkboxs[i].checked=false;
       }
       maxnum=selectText;
       num=0;
   }
</script>
</body>
</html>

啊哈前端

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript限制复选框最多选中几项

限制复选框最多选几项最多选中 1 2 3 4 5 6 项 var maxnum=1,num= 0,checkboxs=document.getElementsByName("checkmost"),al
复制链接

扫一扫