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

<!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. mysq 性能分析利器

    poor man’sprofiler 在Percona Toolkit 中我们也开发了一个类似的穷人剖析器,叫做pt-pmp

  2. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  3. React Native for Android 学习笔记

    C:\Users\Vic Lee\AwesomeProject>react-native run-android Starting JS server... Running D:\Android ...

  4. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  5. linux ‘|’ 与重定向 实例详解

    重定向与管道 ----------小命令大作为 >:重定向标准输入出定向命令 用的最多的就是向某个文件中写入内容 [root@localhost ~]# echo "Hello,wor ...

  6. Thread 和 Runnable 的区别

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口: Thread类是在java.lang包中定义 的.一个类只要继承了Thread类同时覆写了本类中的run ...

  7. javascript对象创建方式

    工厂模式 在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示: function createPerson(name,age,j ...

  8. 微信小程序-表单

    wxml <view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" p ...

  9. rabbitmq 3.6 延时消息

    rabbitmq-plugins enable rabbitmq_delayed_message_exchange #安装插件 https://github.com/rabbitmq/rabbitmq ...

  10. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...