zoukankan      html  css  js  c++  java
  • js 多个checkedBox分组互斥功能实现 由于QQ邮件无法发送暂且将js写在博客园

    今天有一项目需要实现多个checkbox分组实现组内互斥功能 。

    具体要求如下:大的分类分为A B C 三类, 其中 A   B 中又分为 A1 A2 A3   B1 B2 B3  二级分类,二级分类下又有

      A11  A12 A13 A14  A21 A22 A31 A32  B11 B12 B13 B14 ... 。要求实现 A B C 互斥 A1 A2 A3 B1 B2 B3 组内互斥。具体结构及代码如下 

    具体功能树如下:

    A

        A1

           A11

           A12

           A13

       A2

          A21

          A22

       A3

         A31

         A32

    B

        B1

           B11

           B12

           B13

       B2

          B21

          B22

      B3

          B31

          B32

    C

        <script type="text/javascript" src="jquery-min-lastest.js"></script>


        <script type="text/javascript">

            function CheckedValidate(ckid) {

                var sp = new String();
                sp = "1";
                var arr = new Array();
        //定义互斥事件
         var dic_msg = { "ck1000": "ck1000-ck1101-ck1102-ck1103-ck1104-ck1201-ck1202-ck1301-ck1302",
                         "ck1101": "ck1101-ck1000-ck1201-ck1202-ck1301-ck1302",
                         "ck1102": "ck1102-ck1000-ck1201-ck1202-ck1301-ck1302",
                         "ck1103": "ck1103-ck1000-ck1201-ck1202-ck1301-ck1302",
                         "ck1104": "ck1104-ck1000-ck1201-ck1202-ck1301-ck1302",
                         "ck1201": "ck1201-ck1000-ck1101-ck1102-ck1103-ck1104-ck1301-ck1302",
                         "ck1202": "ck1202-ck1000-ck1101-ck1102-ck1103-ck1104-ck1301-ck1302",
                         "ck1301": "ck1301-ck1000-ck1101-ck1102-ck1103-ck1104-ck1201-ck1202",
                         "ck1302": "ck1302-ck1000-ck1101-ck1102-ck1103-ck1104-ck1201-ck1202",

                         "ck2000": "ck2000-ck2101-ck2102-ck2103-ck2104-ck2201-ck2202-ck2301-ck2302",
                         "ck2101": "ck2101-ck2000-ck2201-ck2202-ck2301-ck2302",
                         "ck2102": "ck2102-ck2000-ck2201-ck2202-ck2301-ck2302",
                         "ck2103": "ck2103-ck2000-ck2201-ck2202-ck2301-ck2302",
                         "ck2104": "ck2104-ck2000-ck2201-ck2202-ck2301-ck2302",
                         "ck2201": "ck2201-ck2000-ck2101-ck2102-ck2103-ck2104-ck2301-ck2302",
                         "ck2202": "ck2202-ck2000-ck2101-ck2102-ck2103-ck2104-ck2301-ck2302",
                         "ck2301": "ck2301-ck2000-ck2101-ck2102-ck2103-ck2104-ck2201-ck2202",
                         "ck2302": "ck2302-ck2000-ck2101-ck2102-ck2103-ck2104-ck2201-ck2202",
                         "ck3000": "ck3000"
                   };
           var getCross =
            function (a, b) {
                if (a.length > b.length) {//a长度大于b时交换,应该能提高效率       
                    var temp = b, b = a, a = temp;
                }
                var reg = a.replace(/-/g, "|").replace(/|$/, ""); //构造正则,并去掉结尾的| 
                return b.match(new RegExp(reg, "g")).join('-');
            };

            if ($("#" + ckid).attr("checked")) { sp = dic_msg[ckid]; } else { ; }

            $("#worldDestination input:checkbox").each(function (index, ck) {
                if ($("#" + ck.id).attr("checked")) {
                    if (sp == "1") { sp = dic_msg[ck.id]; }
                    sp = getCross(sp, dic_msg[ck.id]);
                   
                }
                else { ; }

            }); alert(sp);
       if (sp == "1") {
           $("#worldDestination input:checkbox").each(function (index, ck) {
               $("#" + ck.id).attr("disabled", false);
           });
       }
       else {
           $("#worldDestination input:checkbox").each(function (index, ck) {
               if (sp.indexOf(ck.id) >= 0) { $("#" + ck.id).attr("disabled", false); }
               else { $("#" + ck.id).attr("disabled", true); }
           });
           //$("#" + ckid).attr("disabled", false);
       }
     }

  • 相关阅读:
    并发和多线程(二)--启动和中断线程(Interrupt)的正确姿势
    并发和多线程(一)--创建线程的方式
    MySQL系列(十二)--如何设计一个关系型数据库(基本思路)
    Elasticsearch系列(二)--query、filter、aggregations
    Spark-python入门
    python中的Turtle模块
    pytorch显示网络结构
    风格迁移(2)-Fast Style Transfer
    风格迁移(1)-格拉姆矩阵
    使用GAN生成图片
  • 原文地址:https://www.cnblogs.com/xiaoguozi/p/3861545.html
Copyright © 2011-2022 走看看