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

时间：2022-09-28 07:46:53

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

  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是否选中&comma;全选&comma;取消全选&comma;反选&comma;选择奇数偶数项

    // 一,判断选中 // 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. 最简单的可取消多选效果&lpar;以从水果篮中挑选水果为例&rpar;【jsDEMO】

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

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

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

  8. JS 某一区域内所有CheckBox全选和取消全选&lpar;&period;net&rpar;

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

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

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

随机推荐

  1. RHEL7网络管理之nmcli

    在RHEL7中默认使用NetworkManager 守护进程来监控和管理网络设置.nmcli是命令行的管理NetworkManager的工具,会自动把配置写到/etc/sysconfig/networ ...

  2. JMeter基于http请求的web接口性能测试总结

    [本文出自天外归云的博客园] 基于http请求的web接口性能测试总结 压测的目的:对于Web接口压测的目的最终是要在对数据库造成压力的情况下观察压测服务器的cpu是否达到预警值.memory是否发生 ...

  3. 【转载】IP首部、TCP首部、UDP首部

    [转载自]http://blog.csdn.net/hjffly/article/details/7959889 IP首部 版本:L3协议版本号,IPv4或IPv6 首部长度:单位为4字节 协议:L4 ...

  4. 学习使人快乐7--Mail收发原理&plus;计划

    本篇了解邮件收发的原理与机制(smtp,pop3协议).不打算作重点学习辣~~~~~~~~~~~~~~~~ 日常感谢大佬gacl 另:打算把每周计划学的东西发在blog上面,勉励一下本咸鱼本周计划:1 ...

  5. KMP Algorithm 字符串匹配算法KMP小结

    这篇小结主要是参考这篇帖子从头到尾彻底理解KMP,不得不佩服原作者,写的真是太详尽了,让博主产生了一种读学术论文的错觉.后来发现原作者是写书的,不由得更加敬佩了.博主不才,尝试着简化一些原帖子的内容, ...

  6. rest api方式实现对文档库的管理

    写在前面 刚入职一家新公司,在对接app的时候需要获取到某公司的sharepoint上面的文档库,获取文档库列表,团队文档库中的文件和文件夹列表,个人文档库中的文件文件夹列表,及在app端进入文件夹的 ...

  7. AJAX异步传输——以php文件传输为例

     此文档解决以下问题: 一.在当前html页面显示请求的数据1.get方式请求 ,不传递参数2.get方式请求 ,传递参数3.post方式请求 ,不传递参数4.post方式请求 ,传递参数 二.通过按 ...

  8. robot framework-断言

    *** Test Cases *** 断言一 #01.should contain . should not contain 与should contain x times @{list1}= cre ...

  9. alpha冲6

    队名:日不落战队 安琪(队长) 今天完成的任务 回收站前端界面. 明天的计划 查看个人信息界面. 还剩下的任务 信息修改前端界面. 设置界面. 遇到的困难 模拟机莫名其妙就崩了,调试了很久,后在队友的 ...

  10. 转：聊聊Greenplum的那些事

    笔者有幸从04年就开始从事大规模数据计算的相关工作,08年作为Greenplum 早期员工加入Greenplum团队(当时的工牌是“005”,哈哈),记得当时看了一眼Greenplum的架构(嗯,就是 ...

相关文章