• 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);
       }
     }

  • 相关阅读:
    如何卸载服务(转)
    The Frightening Science of Prediction: How Target & 10 Others Make Money Predicting Your Next Life Event(转摘)
    如果你迷恋厚实的屋顶,就会失去浩瀚的繁星
    李开复:移动互联网创业不要总是“入口思维”(转)
    [微言]增长与幸福 zz
    缔元信
    Tabledriven Approach
    北京医院排名 很有用,留下了
    青春期企业如何突围(转)
    意大利罗马&佛罗伦萨 攻略
  • 原文地址:https://www.cnblogs.com/xiaoguozi/p/3861545.html
Copyright © 2020-2023  润新知