限定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文件,代码写的比较粗糙,需要测试的朋友可以略作修改。
限定checkbox最多选中数量的更多相关文章
- jQuery和js如何判断checkbox是否选中
jquery: <div id="divId" class="divTable"><div class="tableBody&quo ...
- checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- JQuery 多个checkbox 只选中一个
<form id="common-form"> <input name="check1" type="checkbox"/ ...
- jquery 实现只能选中一个checkbox,选中当前的去除上一个
jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...
- JQuery 实现多个checkbox 只选中一个
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个,且用jquery获取被选的值
jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...
- JQuery判断checkbox是否选中-批量
在html的checkbox里,选中的话会有属性checked="checked". 如果用一个checkbox被选中,alert这个checkbox的属性"checke ...
- TreeView控件的CheckBox级联选中或取消
背景: 在一个项目开发中遇到这样的要求:当选中树中一个节点时,需要同时选中其父节点,直至根节点.在取消一个节点的选中时,需要将其所有子节点取消选中,直至叶子节点.由于项目用户体验暂时可以不用考虑,直接 ...
随机推荐
- bzoj 3831 Little Bird (单调队列优化dp)
/*先贴个n*n的*/ #include<iostream> #include<cstdio> #include<cstring> #define maxn 100 ...
- 关于ImageView加载出现OOM问题
略感蛋疼,一直以为应该不是这个问题的,所以调试了一下午,后来测试了下如果在XML里面改变ImageView的src话会出现什么问题 结果如我预料,仍然是只能显示部分图片,因为之前有运行成功了,我也不清 ...
- JVM 内存分为四大块
1.栈区 存放函数参数值和局部变量值 2.堆区 3.静态区 4.代码区
- Remoting 的“传递的引用”理解
WCf是集大成者,具有其他微软的很多技术,其中分布式上很多借助于Remoting,所以研究一下Remoting有助于理解WCF 提到Remoting就不得不涉及到MarshalByRefObject这 ...
- 遍历页面上所有TextBox,并赋值为String.Empty
//不含母板页 foreach (System.Web.UI.Control txtobj in this.Page.Controls) { if (txtobj.GetType().Na ...
- PHP preg_match正则表达
在php中preg_match()函数是用来执行正则表达式的一个常用的函数,下面我来给大家详细介绍preg_match使用方法. 函数用法 int preg_match_all ( string pa ...
- UML中聚合和组合的区别
聚合 聚合其实是关联的一个特例,表示了两个对象之间“part of(部分-整体)”的关系,是一种弱关联,部分的生命周期可以超越整体.在UML中,用整体端有空心菱形箭头的双向关联修饰聚合.聚合的示例如下 ...
- 【创建型】Singleton模式
单例模式可以说是所有23种设计模式中最为简单的一个,没有之一.其主要思想就是保证整个应用环境中,最多只会有一个对象的实例.类关系图参考如下: 在c++中,单例模式的实现,较为常用的实现方式一般为: n ...
- 全排列算法之Perm算法实现
题目描述: 给定一个由不同的小写字母组成的字符串,输出这个字符串的所有全排列. 我们假设对于小写字母有'a' < 'b' < … < 'y' < 'z',而且给定的字符 ...
- C语言+ODBC+SQL 操作(向SQL里面添加数据)
为了节省时间,我就引用上一节的数据库的表和C语言的结构体数组,在结构体数组中添加数据,清空数据库数据. 第一步查询:SQLBindParameter函数的用法. SQLRETURN SQLBindPa ...