jquery,再次点击取消,超过3个,则提示只允许选择3个

求教... 求教展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

miniappkFwV0962YhOPw
推荐于2016-08-21 · 请开发者输入账号签名

miniappkFwV0962YhOPw

采纳数：2709 获赞数：7887

向TA提问私信TA

关注

展开全部

你是说多选框吗？

例子如下：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html>
<html>
<head>
<script src="h tt p://ww w.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){

$(":checkbox").click(function(){
if($(":checkbox:checked").length>3){alert("只能选3个");return false;}
});
});
</script>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
</html>

更多追问追答
追问

是 点击LI 很多的li 只能点击三个
追答

提高分后，给你回答
追问

提高了！
追答

<script>
$(document).ready(function(){
	$("li").click(function(){
		$(this).toggleClass("checked");
		if($(".checked").length>3){
			alert("最多选3项");
			$(this).removeClass("checked");
			return false;
		}
	});
	$("button").click(function(){
	var x=new Array();
	var str=new Array();
		$(".checked").each(function(){
		x.push($(this).index("li")+1);
		str.push($(this).text());
		});
		alert("共选了"+$(".checked").length+"项");
		alert("分别是第"+x+"项，内容为"+str);
	});
});
</script>

<style type="text/css">
<!--
ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
li {
	text-align: center;
	display: block;
	height: 30px;
	width: 100px;
	float: left;
	margin: 10px;
	line-height: 30px;
	border: 2px solid #CCCCCC;
	color: #666666;
}
.checked {
	border-top-color: #FF9900;
	border-right-color: #FF9900;
	border-bottom-color: #FF9900;
	border-left-color: #FF9900;
}

-->
</style>
</head>

<body>
<ul>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
</ul>

  <button>查看选了哪几项</button>
</body>
</html>
追问

谢谢 我试下能不能用