1.首先前端创建多选框元素
<%--标签 开始--%>
<p>选择标签:<br/>
<c:forEach items="${allTag}" var="tag" varStatus="status">
<c:if test="${status.count%8==0}">
<br/>
</c:if>
<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>
由于返回值是false所以可以实现超过两个之后,前台多选框不可再选