限定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文件，代码写的比较粗糙，需要测试的朋友可以略作修改。

转载于:https://www.cnblogs.com/shazhou-blog/p/5183129.html

限定checkbox最多选中数量相关推荐

uni-app checkbox限制选中数量移除选中样式
<uni-popup ref="carType" type="bottom"><uni-card class="content-ca ...
jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuer ...
jq判断 checkbox 是否选中以及设置checkbox选中
jquery判断checked的三种方法: .attr('checked) ; //看版本1.6+返回:"checked"或"undefined" ;1.5- ...
微信小程序判断某个checkbox是否选中（在非checkboxchange事件中）
做购物车的小程序时,点击已被选中的某个商品的加号时总计的价格也要跟随商品数量的增加而累加,也就是这个加号的点击事件里,我们要判断当前商品是否是选中状态:我的方法是在checkbox发生改变时,在da ...
Jquery 添听checkbox 是否选中
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charse ...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...
html5中checkbox的选中状态的设置与获取
获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...
checkbox选中和不选中 jqu_jquery怎么让checkbox不选中？
jquery怎么让checkbox不选中?下面本篇文章给大家介绍一下jquery设置checkbox选中和不选中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery设 ...
checkbox选中和不选中 jqu_jQuery解决checkbox未选中不提交值的问题
Loading... W3C最新规定,当checkbox未选中,post不会将值提交到服务器,这就出现了一个变量未初始化的问题,看网上有很多朋友增加隐藏表单的方式解决,如果有多个checkbox的话, ...

限定checkbox最多选中数量

限定checkbox最多选中数量相关推荐

最新文章

热门文章