多选解决方案(1)

来源：互联网发布：psv重构数据库编辑：程序博客网时间：2024/06/05 17:31

<table style="width:100%; left: 50px; grid-column:50;">
<tr>
<td width="150px" valign="top">
【喜欢的运动】<br /><br />
</td>
<td width="600px">
<label id="xingquaihaotext1" class="form-control" onclick="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;"onclick="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>

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>

0 0