限定checkbox最多选中数量
一、概述：
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文件，代码写的比较粗糙，需要测试的朋友可以略作修改。
