2011-09-29 2 views
0

나는 코딩에 대해 잘 모르는 나는이 양식을 작성하는 데 필요한 3 개 가지 영역/div의 (A, B, C) :3 확인란은

- A의 체크 박스 2 및/또는 3

C 선택한 경우 표시됨 - - A의 체크 박스 4

선택되면 도시 항상 표시, B가

B 및 C 디스플레이를 제어

그래서, 내가 도달 한 것을 지금까지이었다

<head> 
<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
} 
//--> 
</script> 
</head> 

<body> 
<form> 
<input type="checkbox" value="value1" onclick="showMe('div1', this)" />value1 
<input type="checkbox" value="value2" onclick="showMe('div1', this)" />value2 
<input type="checkbox" value="value3" onclick="showMe('div1', this)" />value3 
<input type="checkbox" value="value4" onclick="showMe('div2', this)" />value3 
</form> 

<div id="div1" style="display:none;">Show Div 1</div> 
<div id="div2" style="display:none;">Show Div 2</div> 

</body> 

것은 내가 1, 2 및/또는 3을 선택하면, 사업부 B가 제대로 표시하지만,이다 나는 그들 중 하나를 선택 취소하는 경우, DIV의 B 숨 깁니다. 그들 중 하나가 점검 될 때마다 div B가 필요합니다.

모든 확인란이 동일한 양식 영역 (div)을 "활성화"하기 때문에 각 확인란에 다른 div를 할당해도 작동하지 않습니다.

모든 요망?

답변

1

지금 이벤트 처리기는 이벤트를 발생시킨 확인란을 고려합니다. 그것이 정말로 필요한 것은 세 개의 체크 박스를 각각 폴링하여 이벤트 중 어느 체크 박스가 체크되었는지 확인하는 것입니다.

<head> 
<script type="text/javascript"> 
<!-- 
function updateVis() { 
    var show1 = 
     (document.theForm.input1.checked) 
     || (document.theForm.input2.checked) 
     || (document.theForm.input3.checked) ? "block" : "none"; 
    document.getElementById("div1").style.display = show1; 

    var show2 = (document.theForm.input4.checked) ? "block" : "none"; 
    document.getElementById("div2").style.display = show2; 
} 
//--> 
</script> 
</head> 

<body> 
<form name="theForm"> 
<input name="input1" type="checkbox" value="value1" onclick="updateVis()" />value1 
<input name="input2" type="checkbox" value="value2" onclick="updateVis()" />value2 
<input name="input3" type="checkbox" value="value3" onclick="updateVis()" />value3 
<input name="input4" type="checkbox" value="value4" onclick="updateVis()" />value3 
</form> 

<div id="div1" style="display:none;">Show Div 1</div> 
<div id="div2" style="display:none;">Show Div 2</div> 

</body> 
+0

YES :

는 그래서 논리가 이벤트 핸들러에서 유지되어야 할 의미가 있습니다! 그것은 아름답게 작동합니다! 내가 널 사랑한다고 언급 했니? = D 많은 많은 감사합니다! – user971875