js效果-多选只能选两项,如果超出自动取消第一次选的

这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨
<!DOCTYPE>
<html>
<head>
<title> New Document </title>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head> <body>
<p><input type="checkbox" name="aabb"><span>多选1</span></p>
<p><input type="checkbox" name="aabb"><span>多选2</span></p>
<p><input type="checkbox" name="aabb"><span>多选3</span></p>
<p><input type="checkbox" name="aabb"><span>多选4</span></p>
<p><input type="checkbox" name="aabb"><span>多选5</span></p>
<p><input type="checkbox" name="aabb"><span>多选6</span></p>
</body>
<script type="text/javascript">
var cy = [],
inpNode = $('input'); inpNode.change(function(){
var n = inpNode.index($(this)), shiftNum;
if (cy[0] == n || cy[1] == n) {
var index = cy.indexOf(n);
cy.splice(index,index);
return;
}
};
if (cy.length === 2) {
inpNode.eq(cy[0]).attr('checked', false);
cy.shift();
};
cy.push(n); });
</script>
</html>
js效果-多选只能选两项,如果超出自动取消第一次选的的更多相关文章
- zTree 节点勾选取消勾选 选中取消选中
zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...
- checkbox 最多选两项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项
// 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...
- checkbox多选、全选js效果
//全选checkbox function allCheck() { //全选input var all = $("input[name='all']"); //全部的input ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】
[功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...
- Js验证 :只能输入数字和小数点 验证是否是数字 js取float型小数点后两位
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...
- JS 某一区域内所有CheckBox全选和取消全选(.net)
假设在某个table中的两个td,一个放全选checkbox,一个放所有的checkbox[其他标签类似] eg: <td>人才类别:<asp:CheckBox ID= ...
- Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框
Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框 Jquery EasyUI Combotree单选框,Jquery EasyUI Combotree只能选择叶子节点 ...
随机推荐
- 004_Intelij 使用,Anonymous Apex
插件安装好之后,就可以正常添加cloud 项目: 注意:免费使用是30天,为了不去买license,在过期后,去修改下机器的日期,这个日期是在安装后的一个月内,改好日期后,启动Intelij 少一个截 ...
- 数据分析 - 开放街道地图(OpenStreetMap)
数据分析 - 开放街道地图(OpenStreetMap) Reinhard使用OpenStreetMap的开放地图数据作为本次数据分析的数据源,使用Python进行数据清洗,使用MongoDB进行数据 ...
- MessageClient
using Manager.Common; using System; using System.Collections.Generic; using System.Diagnostics; usin ...
- Mysql 5.7 Linux安装详细步骤
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载安装包 http://dev.mysql.com/downloads/mysql/#downloads 推荐下载通用安装方法的TAR包(h ...
- JVM之几种垃圾收集器简单介绍
本文中的垃圾收集器研究背景为:HotSpot+JDK1.7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老代的算法. JVM会从年轻代 ...
- 今天被PHP短标签给坑了
<?=$var?><?php echo $var; ?> 上面这两种写法是等价的,但由于某些空间提供商并未开启短标记,所以还是推荐使用标准格式吧,今天被这东西坑了!!
- block的循环引用
什么是循环引用呢? 就是我引用你,你引用我,就会造成循环引用,双方都不会被销毁,导致内存泄漏. _block = ^{ NSLog(@"%@", self); }; block会 ...
- Bootstrap相关总结
1.工具提示 Tooltips js调用显示 $('#example').tooltip( { title:'这个是一个提示', }); $('#example').tooltip('show');
- easyui 日期控件清空值
最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 $('#yourId').combo('setText',''); 2,更改js文件 从官网下 ...
- Radmin Server-3.5 完美绿色破解版(x32 x64通用) 第三版 + 单文件制作方法
Radmin Server v3.5 汉化破解绿色版(x32 x64通用) 第三版 下载链接: https://pan.baidu.com/s/1qYVcSQo 2016年7月8日更新第三版1.修复在 ...