三个div显示隐藏并位置调整控制（encoding-utf8）-CSDN博客

本文链接：https://blog.csdn.net/xyhongmei/article/details/6016720

<html>
<HEAD><TITLE></TITLE>
<style>
.TITLE_S {font-size:12px; color: #2160ad; BACKGROUND-COLOR: #ecf7fb;
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-color:#d2e1e4;
height:19px; padding:1px 8px 0px 8px ; text-align:right;}

.TITLE_I{font-size:12px; color: #2160ad; BACKGROUND-COLOR: #ffffff;
    border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
    border-color:#d2e1e4;
    height:19px; padding:5px 2px 3px 10px ; }

INPUT.INPUT { COLOR: #515050; FONT-SIZE:11px; height:18; margin:-3 0 -2 0 }
</style>

/**
* UI Event
*/
function onClickSearchType(chkObjElement) {
   //alert("object=" + chkObjElement);
   //alert("checked=" + chkObjElement.checked);
   //alert("value=" + chkObjElement.value);
   //alert(layout[parseInt(chkObjElement.value)]);

   var form = document.queryApplyCondition;
   var chkObj = form.q_search_type;

   var checkedCnt = 0;
   for(var i = 0; i < chkObj.length; i++){
       if(chkObj[i].checked && chkObj[i].value != chkObjElement.value){
           checkedCnt++;
       }
   }

   var condition1 = document.getElementById("div_condition1");
   var condition2 = document.getElementById("div_condition2");
   var condition3 = document.getElementById("div_condition3");

   var currentDiv;
   switch(chkObjElement.value){
       case "0"://기간별 검색
           currentDiv = condition1;
           break;
       case "1"://사용자별 검색
           currentDiv = condition2;
           break;
       case "2"://신청항목별 검색
           currentDiv = condition3;
           break;
       default:
           alert("value error![value=" + chkObjElement.value + "]");
           break;
   }

    var displayDivs = new Array();
    var displayDivsIdx = 0;
    if(condition1.style.display == "") {
        displayDivs[displayDivsIdx++] = condition1;
    }

    if(condition2.style.display == "") {
        displayDivs[displayDivsIdx++] = condition2;
    }

    if(condition3.style.display == "") {
        displayDivs[displayDivsIdx++] = condition3;
    }

    if(chkObjElement.checked){
        if(currentDiv.style.display == "") {
            return;
        } else {
            currentDiv.style.display = "";

            var lastDisplayDivs = new Array();
            var lastDisplayDivsIdx = 0;
            var div_exist = false;
            for(var i = 0; i < displayDivs.length; i++){
                lastDisplayDivs[lastDisplayDivsIdx++] = displayDivs[i];
                if(displayDivs[i] == currentDiv){
                    div_exist = true;
                }
            }
            if(!div_exist){
                lastDisplayDivs[lastDisplayDivsIdx++] = currentDiv;
            }

            //lastDisplayDivs -- Order by
            for(var i = 0; i < lastDisplayDivs.length; i++){
                for(var j = i + 1; j < lastDisplayDivs.length; j++){
                    if(lastDisplayDivs[i].id > lastDisplayDivs[j].id){
                        var orderTempObj = lastDisplayDivs[i];
                        lastDisplayDivs[i] = lastDisplayDivs[j];
                        lastDisplayDivs[j] = orderTempObj;
                    }
                }
            }

            var pxLeft = 15;
            for(var i = 0; i < lastDisplayDivs.length; i++){
                lastDisplayDivs[i].style.left = new String(pxLeft) + "px";
                pxLeft = pxLeft + parseInt(lastDisplayDivs[i].style.width) + 5;
            }
        }
    } else {
        if(currentDiv.style.display == "none"){
            return;
        } else {
            currentDiv.style.display = "none";

            var lastDisplayDivs = new Array();
            var lastDisplayDivsIdx = 0;
            for(var i = 0; i < displayDivs.length; i++){
                if(displayDivs[i] != currentDiv){
                    lastDisplayDivs[lastDisplayDivsIdx++] = displayDivs[i];
                }
            }

            var pxLeft = 15;
            for(var i = 0; i < lastDisplayDivs.length; i++){
                lastDisplayDivs[i].style.left = new String(pxLeft) + "px";
                pxLeft = pxLeft + parseInt(lastDisplayDivs[i].style.width) + 5;
            }
        }
    }
}

</script>
</HEAD>

<DIV ID="page_title" STYLE="left:15px;top:30px; width:837px;height:25px;border-width:0;border-color:#AACCFF;border-style:solid;position:absolute;overflow:no;">
<p style="padding:3 3 0 0;width:360px;height:23px;text-align:left;text-valign=top;FONT-SIZE:13px;"> 
<input type="checkbox" name="q_search_type" value="0" class="INPUT" οnclick="javascript:onClickSearchType(this);"/> 기간별 검색   
<input type="checkbox" name="q_search_type" value="1" class="INPUT" οnclick="javascript:onClickSearchType(this);"/> 사용자별 검색   
<input type="checkbox" name="q_search_type" value="2" class="INPUT" οnclick="javascript:onClickSearchType(this);"/> 신청항목별 검색   
</p>
</DIV>

<DIV ID="div_condition1" STYLE="left:15px;top:60px; width:260px;height:120px; background-color:#FFFFFF;border-width:0;border-color:#AACCFF;border-style:solid;position:absolute;overflow:no">
<TABLE cellspacing="0" cellpadding="0" border="0" height='120px'>
<TR valign="top">
    <TD CLASS='TITLE_I' WIDTH='250px' style="border-left-width: 1px;border-left-style: solid;border-bottom-width: 1px;border-bottom-style: solid;text-align:left;text-valign:top;">
      <span style="height:25px;">
        <input type="radio" name="q_period_type" value="1" class="INPUT" style="margin:0 0 0 0"/> 신청일자기준   
        <input type="radio" name="q_period_type" value="2" class="INPUT" style="margin:0 0 0 0"/> 처리일자기준   
      </span>
      <span style="height:25px;">
         기간  <input type="text" name="q_start_date" size="10" class="INPUT" style="margin:0 0 0 0"/> ~ <input type="text" name="q_end_date" size="10" class="INPUT" style="margin:0 0 0 0"/>
      </span>
      <span style="height:25px;">
            월  
          <select name="sel_period_months" class="INPUT">
            <option value="4">4개월</option>
            <option value="5">5개월</option>
            <option value="6">6개월</option>
            <option value="7">7개월</option>
            <option value="8">8개월</option>
            <option value="9">9개월</option>
            <option value="10">10개월</option>
            <option value="11">11개월</option>
            <option value="12">1년</option>
          </select>
      </span>
    </TD>
</TR>
</TABLE>
</DIV>

<DIV ID="div_condition3" STYLE="left:545px;top:60px; width:290px;height:120px; background-color:#FFFFFF;border-width:0;border-color:#AACCFF;border-style:solid;position:absolute;overflow:no;display:;">
<TABLE cellspacing="0" cellpadding="0" border="0" height='115px'>
<TR valign="top">
    <TD CLASS='TITLE_I' WIDTH='290px' style="border-left-width: 1px;border-left-style: solid;border-bottom-width: 1px;border-bottom-style: solid;text-align:left;text-valign:top;">
      <TABLE cellspacing="0" cellpadding="0" border="0" height='110px'>
    <TR valign="top">
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="01" class="INPUT" style="margin:0 0 0 0"/> Removal Disk   
      </TD>
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="05" class="INPUT" style="margin:0 0 0 0"/> COM1   
      </TD>
    </TR>
    <TR valign="top">
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="02" class="INPUT" style="margin:0 0 0 0"/> Control Attaching Mobile   <br/>
      </TD>
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="06" class="INPUT" style="margin:0 0 0 0"/> COM2   <br/>
      </TD>
    </TR>
    <TR valign="top">
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="03" class="INPUT" style="margin:0 0 0 0"/> Fixed CD ROM/RW   
      </TD>
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="07" class="INPUT" style="margin:0 0 0 0"/> COM3   
      </TD>
    </TR>
    <TR valign="top">
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="04" class="INPUT" style="margin:0 0 0 0"/> Fixed FDD   <br/>
      </TD>
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_general" value="08" class="INPUT" style="margin:0 0 0 0"/> COM4   
      </TD>
    </TR>
    <TR valign="top">
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_special" value="01" class="INPUT" style="margin:0 0 0 0"/> External Internet   
      </TD>
      <TD style="font-size:12px;color: #2160ad;BACKGROUND-COLOR: #ffffff;border-color:#ffffff;padding:0px 0px 0px 5px;">
        <input type="checkbox" name="chk_request_item_special" value="02" class="INPUT" style="margin:0 0 0 0"/> MSN   
      </TD>
    </TR>
      </TABLE>
    </TD>
</TR>
</TABLE>
</DIV>

</form>
</body>
</html>