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

<!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. angularJS——自定义服务provider之$get

    可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改. ...

  2. Mac OS下基于Eclipse的Android调试环境搭建

    1.安装Eclipse:http://www.eclipse.org/downloads/,网页会自动检测适用的版本(Mac OS x64),下载“Eclipse IDE for java Devel ...

  3. phpcms v9调用自定义字段的方法步骤

    代码如下:{loop $shigongtu $r}<img src="{$r[url]} " title="测试"/>{/loop} 2 首页,分页 ...

  4. [已解决] No syntax specified for the proto file : xxx.proto

    在使用protobuf生成相应类文件如java文件的时候需要指定proto的版本, 如: syntax = "proto2"; package my_package; messag ...

  5. LabVIEW如何调用C#Winform

    界面交互并不是Labview的强项,使用Labview创建UI时候总会受制于VI有限的控件,有限的皮肤和有限的控件事件.而当需要实现UI的多文档的窗口,窗口的浮动停靠,动画等功能时还需要花很大的功夫. ...

  6. php中echo(),print(),print_r()之间的区别

    echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用)  print只能打印出简单类型变量的值(如int,string)  print_r可以打印出复 ...

  7. Milliard Vasya's Function-Ural1353动态规划

    Time limit: 1.0 second Memory limit: 64 MB Vasya is the beginning mathematician. He decided to make ...

  8. Network网络

    ifconfig 查看服务器网卡名称 ethtool ethXXX 查看网卡具体信息 要测试一个网卡是否真是1000M的,最保险的说用wget测试一个对方的带宽足够大的下载地址 wget http:/ ...

  9. 位图切割器&位图裁剪器

    位图切割器: 虽然网上有类似的工具,PhotoShop 也有类似功能,但前者似乎不支持超大位图切割(以 G 计大小),而后者的切割块数量好像有比较小的限定范围,于是自己动手写了这个工具. 至于为什么是 ...

  10. Redhat、CentOS添加静态路由的标准方法

    我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可能采取在rc.loal里加入route命令追加静态路由的方法. 现在给大家推荐Redha ...