html Checkbox 多选用jquery限制最多可选数

   amx 和new Array(1) 根据自己的需要定,以下是代码:

   <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

 <script type="text/javascript">
        var max = 2;  //最多的可选数
        var num = 0; //checkbox已选钩的数量
        var arr = new Array(1);  //存放选项的数组  
        $(function () {
            $(":checkbox").click(clic); //为所有checkbox加入click事件
            $("#sent").click(sent);
        });

        //点击事件
        function clic() {
            var t = this; //取得被点击的checkbox
            var v = t.value;    //选中的值
            //如果选中
            if (t.checked) {
                if (num >= max) {
                    t.checked = false;
                    alert("最多只能选两个!");
                }
                else {
                    //还没到最多的可选数,添加到为空的无素中
                    if (arr[0] == null) {     
                                      arr[0] = v;
                        //   alert(arr[0] + "0");
                    }
                    else {
                        arr[1] = v;
                        //     alert(arr[1] + "1");
                    }
                    num++;
                }
            }
            else {//遍历存放选项的数组找出值相同的替换为null
                for (var i = 0; i < 2; i++) {
                    if (arr[i] == v) {
                        arr[i] = null;
                    }
                }
                num--;
            }
        }
        function sent() {
            $.post("MyCh.ashx", { "ch1": arr[0], "ch2": arr[1] }, function (signal) {
                if (signal == "0") {
                    alert(signal);
                }
                else {
                    alert(signal);
                }
            });
        }

    </script>

<body>

  kaka  <input id="Checkbox5" type="checkbox" name="ch" value="kaka" />
  laal    <input id="Checkbox6" type="checkbox" name="ch" value="lala" />
  haha <input id="Checkbox7" type="checkbox" name="ch" value="haha" />
   haha   <input id="Checkbox8" type="checkbox" name="ch" value="jaja" />
 <input type="button" id="sent" valu="提交"/>

</body>

posted @ 2012-03-26 20:08  程序员传教士/Ihaveadream  阅读(1401)  评论(0)    收藏  举报