癞龙

导航

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

posted on 2014-07-22 22:23  癞龙  阅读(310)  评论(0编辑  收藏  举报