js实现多选框选中数量限制

最新推荐文章于 2024-06-06 23:30:25 发布

不掉发的coder

最新推荐文章于 2024-06-06 23:30:25 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_48595687/article/details/126321494

版权

笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1.首先前端创建多选框元素

 <%--标签 开始--%>
            <p>选择标签：<br/>

                <c:forEach items="${allTag}" var="tag" varStatus="status">
                    <c:if test="${status.count%8==0}">
                        <br/>
                    </c:if>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input  type="checkbox" id="checkbox" name="tag" οnclick="return tag1()" value="${tag.tagId}">${tag.tagName}
                </c:forEach>

                </p><br/>

            <%--标签 结束--%>

我这里是博客系统的后台标签，从数据库中循环取出的标签，设定只能选中两个，多选则会提示。使用jQuery可以实现

2.导入jQuery，写js脚本

<script src="/resource/js/jquery-3.5.1.js"></script>

<script>
    function tag1(){

        var num = 0;
        var len=document.form_article.tag.length;
        alert(len);
        for(var i=0;i<len;i++){
            if(document.form_article.tag[i].checked){
                num+=1;
            }

        }
        alert(num);
        if(num>2){
            alert("最多只能选中2项");
            return false;
        }
    }

</script>