checkbox的应用，多行选项组选中值的获取

功能图如下：

实现的html代码块如下：

<!--项目筛选区-->
 <div >
     <div id="projects" class="projects rel">
         <div class="pronum"><label >项目筛选：</label>共<span>20</span>个项目</div>
         <div class="selpro">
             <div id="procheck">
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check1" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check1" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check1" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check1" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check1" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check2" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check2" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check2" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check2" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check2" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check3" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check3" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check3" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check3" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check3" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check4" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check4" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check4" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check4" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check4" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
                 <div class="row">
                     <label>职能：</label>
                     <span>
                     <input type="checkbox" name="check5" value="01">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check5" value="02">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check5" value="03">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox" name="check5" value="04">
                     <label >交通管理</label>
                 </span>
                     <span>
                     <input type="checkbox"  name="check5" value="05">
                     <label >交通管理</label>
                 </span>
                 </div>
             </div>
             <div  class="row selmorepro abs">
                 <button id="searchpro">查询</button>
                 <a id="seemore" class="#" href="#">查看更多</a></div>
         </div>
     </div>
 </div>

css主要样式：

.abs{
   position:absolute
}
.rel{
   position:relative;
}
.projects{
    height: 200px;
    overflow: hidden;
}
 .pronum,.row{
    height: 40px;
    vertical-align: middle;
}
.selmorepro{
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: #fff;
}

js代码块如下：

$(function () {
     // 查询按钮的点击事件
        $("#searchpro").click(function(){
            var selproobj=[];
            // 定义一个数组，里面是每一个选项组，选项组里面的数据是选中的数据值
            var arrnum=$("#procheck>div.row").length;
            for(var i=0;i<arrnum;i++){
                var proarrname=$("#procheck>div.row")[i];//获取选择行
                var name=$(proarrname).find("input")[0].name;//获取分组名称
                var proobj={};
                var selarr=[];
                proobj.name=name;
                var groupCheckbox=$("input[name="+name+"]");
                for(var y=0;y<groupCheckbox.length;y++){
                    if(groupCheckbox[y].checked){
                        var val =groupCheckbox[y].value;
                        // console.log(val);
                        selarr.push(val);
                    }
                }
                proobj.value=selarr
                selproobj.push(proobj);
            }
            console.log(selproobj);//选中的结果值
            //此处根据选中的结果值编写ajax请求表格数据
        });
      //点击查看更多动画实现
        var height=$("#projects").height();//容器初始高度
        var allheight=$("#procheck").height();//内容全部高度
        if(allheight+80<height){
            $("#seemore").css("display","none");
        }
        $("#seemore").click(function(){
            var height=$("#projects").height();//容器初始高度
            var allheight=$("#procheck").height();//内容全部高度
            console.log(allheight,height)
            if(height==allheight+80){//已经全部展开
                $("#projects").height(height).animate({height:"200px"},2000);
                $("#seemore").html("查看更多");
            }else if(height-80<allheight){//未展开状态
                $("#projects").height(height).animate({height:allheight+80},2000);
                $("#seemore").html("收起 ↑");
            }
        })

})