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

测试账号 2021-01-20 06:26 638阅读 1赞

功能图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70 1][]实现的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("收起 ↑");
                }
            })

})
````

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70]: /images/1611123955042.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70 1]: /images/1611123930788.png