多选解决方案

<td width="150px" valign="top">
    【喜欢的运动】<br /><br />
</td>
<td width="600px">
    <label id="xingquaihaotext1" class="form-control" οnclick="xqah_display('MSelestList1')" style="width:500px; border:1px solid #ABABAB">请选择...</label>
    <div id="MSelestList1" style="display:none; margin-top:5px;margin-bottom:0px;margin-left:30px; width:400px;">
        <div class="panel panel-default">
            <div class="panel-heading" style="height:35px;">
                <div style="width:100%;height:27px;">
                    请选择，<font style="color:red;">最多只能选5项</font>
                    <button class="btn btn-sm btn-default MSelestList-up" style="float:right;margin-right:10px;margin-top:0px;"οnclick="MSelestList_up('MSelestList1')"> 收起</button>
                </div>
            </div>
            
            <div class="panel-body" id="moreconditiontool" style="display:block;">
                <table style="margin-left:10px;">
                    <tr>
                        <td style="width:130px"><input type="checkbox" class="xiqu-MSelect1" value="足球" />足球</td>
                        <td style="width:130px"><input type="checkbox" class="xiqu-MSelect1" value="篮球" />篮球</td>
                        <td style="width:130px"><input type="checkbox" class="xiqu-MSelect1" value="排球" />排球 </td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="网球" />网球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="羽毛球" />羽毛球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="乒乓球" />乒乓球</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="壁球" />壁球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="保龄球" />保龄球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="手球" />手球</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="橄榄球" />橄榄球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="棒球" />棒球</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="高尔夫" />高尔夫</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="健身" />健身</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="婚恋与家庭" />婚恋与家庭</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="跑步" />跑步</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="自行车" />自行车</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="摩托车" />摩托车</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="汽车" />汽车</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="舞蹈" />舞蹈</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="体操" />体操</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="跆拳道" />跆拳道</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="舞蹈" />柔道</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="体操" />空手道</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="跆拳道" />游泳</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="潜水" />潜水</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="水上运动" />水上运动</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="滑雪/滑冰" />滑雪/滑冰</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="拳击" />拳击</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="钓鱼" />钓鱼</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="瑜伽" />瑜伽</td>
                    </tr>
                    <tr>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="武术" />武术</td>
                       <td><input type="checkbox" class="xiqu-MSelect1" value="其他" />其他</td>
                        <td style="width:130px"><input type="checkbox" class="xiqu-MSelect1" value="不喜欢运动" />不喜欢运动</td>
                    </tr>
                </table>
            </div>
            
        </div>
    </div>
</td>
    <br /><br />


<script>
    function MSelestList_up(up_obj) {
        MSelestList_up_obj = document.getElementById(up_obj);
        MSelestList_up_obj.style.display = "none";
    }
    var MSelestList_status = 0;
    function xqah_display(MSelestListobj) {
        MSelestList = document.getElementById(MSelestListobj);
        if (MSelestList_status == 0) {
            MSelestList.style.display = "block";
            MSelestList_status = 1;
        } else {
            MSelestList.style.display = "none";
            MSelestList_status = 0;
        }
    }


    $('.xiqu-MSelect1').change(function (event) {
        change_xingquaihaotext('xingquaihaotext1', $('.xiqu-MSelect1'), this);
    });

    function change_xingquaihaotext(emm, obb, thisobj) {
        xingquaihaotext = document.getElementById(emm);
        var lengthmm1 = obb.length;
        var stre = "";
        var countAS = 0;
        for (ii = 0; ii < lengthmm1; ii++) {
            if (obb[ii].checked) {
                if (countAS >= 5) {
                    thisobj.checked = false;
                    return;
                } else {
                    countAS++;
                    stre = stre + obb[ii].value + "  ";
                }
            }
        }
        if (stre == "" || countAS == 0) {
            xingquaihaotext.textContent = "请选择...";
        } else {
            xingquaihaotext.textContent = stre;
        }
    }
</script>