这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨

<!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效果-多选只能选两项,如果超出自动取消第一次选的的更多相关文章

  1. zTree 节点勾选取消勾选 选中取消选中

    zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...

  2. checkbox 最多选两项

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项

    // 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...

  4. checkbox多选、全选js效果

    //全选checkbox function allCheck() { //全选input var all = $("input[name='all']"); //全部的input ...

  5. JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  6. 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】

    [功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...

  7. Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  8. JS 某一区域内所有CheckBox全选和取消全选(.net)

    假设在某个table中的两个td,一个放全选checkbox,一个放所有的checkbox[其他标签类似] eg:        <td>人才类别:<asp:CheckBox ID= ...

  9. Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框

    Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框 Jquery EasyUI Combotree单选框,Jquery EasyUI Combotree只能选择叶子节点 ...

随机推荐

  1. Asp.Net运行于32/64模式下的性能差异

    项目使用的是Oracle数据库,.Net使用Odac对数据库进行访问.在官方下载Odac时会让你选择是下载32位的还是64位的.这会直接影响到网站的运行模式.目前我们使用的是32位的,那么布署时,需要 ...

  2. ip相关

    查看ip ifconfig -a 查看端口占用 ps -aux | grep tomcat

  3. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  4. 如何让你的App适配iOS7？

    随着苹果在2013年9月18日发布iOS7最新的系统以来,iOS各种设备升级到iOS7的数字就已经不断刷新记录.目前据外界统计iOS7设备装机量已经达到2.5亿部,已占iOS设备的64%.由此可见让自 ...

  5. python 学习笔记十五 web框架

    python Web程序 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. Python的WEB框架分为两类: 自己写socket,自 ...

  6. ImageLoader图片加载

    http://blog.csdn.net/liu1164316159/article/details/38728259       转载请注明http://write.blog.csdn.net/po ...

  7. python非递归全排列

    刚刚开始学习python,按照廖雪峰的网站看的,当前看到了函数这一节.结合数组操作,写了个非递归的全排列生成.原理是插入法,也就是在一个有n个元素的已有排列中,后加入的元素,依次在前,中,后的每一个位 ...

  8. 函数式functor的理解

    // 参考 // http://jiyinyiyong.github.io/monads-in-pictures/ // https://llh911001.gitbooks.io/mostly-ad ...

  9. 用Charles抓取https接口数据

    由于我之前抓取的某APP接口全面换上了https接口,导致我在抓取过程中遇到了很大的困境 用Charles无法获取到内容,由于现在已经搞定了,无法展示当时的错误信息,我从网站找了一个类似的错误信息 首 ...

  10. Mac系统下配置Tomcat

    1.下载Tomcat,网址:http://tomcat.apache.org/download-70.cgi: 2.进入终端Terminal,打开配置文件.bash_profile,输入open .b ...