1. 程式人生 > >JavaScript操作複選框顯示/隱藏DIV內容

JavaScript操作複選框顯示/隱藏DIV內容

 /*******下面是HTML*******/ <!-- 模態框(Modal)內的是複選框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">選擇所查詢的條件:</h4>
</div>
<div class="modal-body">
<div class="checkbox" style="margin-left: 7px">
<label><input name="selectRe" type="checkbox" value="modelDiv">機種</label>
</div>
<div class="checkbox" style="margin-left: 7px">
<label><input name="selectRe" type="checkbox" value="lineDiv">線別</label>
</div>
<div class="checkbox" style="margin-left: 7px">
<label><input name="selectRe" type="checkbox" value="colorDiv">顏色</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" onclick="retrievalSubmit()" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
</div>

/******要顯示的DIV*****/

<div style="margin-top: 15px">
<!-- 機種下拉單 -->
<div name="modelDiv" class="input-group" style="display:none ; margin-top: 7px">
<div class="input-group-addon">機種</div>
<select class="form-control" style="text-align: center;"
id="modeldata">
<option value="0" selected="selected">---請選擇---</option>
<s:iterator status="index" var="item" value="modelList">
<option value="<s:property value="%{#item.kf_modelname}"/>">
<s:property value="%{#item.kf_modelname}" /></option>
</s:iterator>
</select>
</div>

<div name="lineDiv" class="input-group" style="display:none ; margin-top: 7px">
<div class="input-group-addon">線別</div>
<select class="form-control" style="text-align: center;"
id="line">
<option value="0" selected="selected">---請選擇---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

<div name="colorDiv" class="input-group" style="display:none ; margin-top: 7px">
<div class="input-group-addon">顏色</div>
<select class="form-control" style="text-align: center;"
id="color">
<option value="0" selected="selected">---請選擇---</option>
<s:iterator status="index" var="item" value="colorList">
<option value="<s:property value="%{#item.customer_color_name}"/>">
<s:property value="%{#item.customer_color_name}" /></option>
</s:iterator>
</select>
</div>
</div>

/**********下面是JavaScript操作******/

function retrievalSubmit(){

var checkValues = new Array();/*建立一個數組容器*/
var ls = $('input[name="selectRe"]');/*獲取複選框*/
for(var i = 0; i < ls.length; i++){/*遍歷得到value值*/
if(ls[i].checked){/*複選框被選中*/
checkValues[checkValues.length] = ls[i].value;
}
}
$("div[name=modelDiv]").hide();
$("div[name=lineDiv]").hide();
$("div[name=colorDiv]").hide();/*隱藏div*/

for (var j = 0 ; j < checkValues.length ; j++ ){/*遍歷輸出的複選框的value值*/
$("div[name=" + checkValues[j] + "]").show();/*通過獲取div的name屬性來顯示*/
}
$('#myModal').modal("hide");/*點選確認後模態框隱藏*/
}