一、概述：
checkbox是我们在编写网页的时候经常使用的多选框，但是有些时候我们会限定最多选中的数量，如何限定呢？
下面这例子限定了最多选中两个元素，并且将这两个选中的源依次显示在一个文本框里：
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE> by失落沙洲 </TITLE>
</HEAD>
<style>
#xianshi{
height:30px;
width:200px;
border:1px solid black;
}
</style>
<BODY>
<div id="xianshi"></div>
<div id="d1">
<input type="checkbox" name="tianqi" value="下雨" onclick="check_count(this)" >下雨
<input type="checkbox" name="tianqi" value="下雪" onclick="check_count(this)" >下雪
<input type="checkbox" name="tianqi" value="打雷" onclick="check_count(this)" >打雷
<input type="checkbox" name="tianqi" value="闪电" onclick="check_count(this)" >闪电
<input type="checkbox" name="tianqi" value="台风" onclick="check_count(this)" >台风
<input type="checkbox" name="tianqi" value="晴天" onclick="check_count(this)" >晴天
</div>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
var opts = new Array(); //定义一个空数组
function check_count(_obj) {
if ($(":checkbox[name=‘tianqi‘]:checked").length >= 0) {//找到name为天气的多选框 如果被选中的checkbox 长度大于0
opts.push($(":checkbox[name=‘tianqi‘]").index($(_obj)));//将这个元素压入到opts数组中
var val=$(_obj).val();//获取当前被选中的值
var html="";//定义一个空字符串
html+="<span>"+val+"</span>"//将被选中的值 拼在span标签内 并且传入html中
if(_obj.checked){//判断 如果当前元素被选中
$(html).appendTo("#xianshi");/* 将拼好的html元素插入到 显示框内
注意html 现在是这样的 <span>天气名称</span>
穿到html页面是这种的
<div id="#xianshi">
<span>当前选中的天气名称</span>
<span>第二次选中的天气名称</span>
<span>第三次选中的天气名称</span>
</div>
下面会有限制条件
*/
}else{
$("#xianshi").innerHTML=‘‘;//如果没有被选中显示框为空
}
}
if (opts.length >2) {//如果当前数组长度大于2时，这里就是判定你选中了多少个checkbox
$($(":checkbox[name=‘tianqi‘]").get(opts.shift())).attr("checked", false);/*将你第一个选中的 check值设为false
注：checked 值有两个true为选中
false为未选中*/
$("#xianshi").children("span:eq(0)").remove();/*找到#xiashi框，查找他下面的第一个span标签
eq(0)是span标签的下标，0是第一个 1是第二个
排序方式跟数组相同的应该比较好理解
remove()是移除函数
也就是将你插入到#xianshi下的第一个span标签移除
这样就按照顺序显示了
*/
}
}
</script>
</BODY>
</HTML>
代码里面已经写了注释，相信大家能看懂，此处注意，文档引用了jquery文件，代码写的比较粗糙，需要测试的朋友可以略作修改。
时间： 2024-10-11 03:22:08