div를 표시하려면 체크 상자를

Question

여기에 표시하려면 주어진 텍스트 상자를 선택하여 div ClinicFieldSet 및 HospitalFieldset을 표시하려고합니다. 둘 다 선택되면 ClinicFieldset 및 HospitalFieldset이 모두 표시되어야하며 확인란 중 하나가 선택되면 어떤 div가 선택되었는지 표시되어야합니다.

내 스크립트의 문제는 확인란 중 하나를 클릭하면 두 확인란이 모두 선택되고 해당 확인란도 선택 취소 할 수 없다는 것입니다. 그래서 둘 다에 적용하려면 두 체크 박스에 자바 스크립트 onclick을 사용이 문제 :(

를 해결하기 위해 나에게 아이디어를 제안 해주십시오.

<script type="text/javascript> 

    var clinic = document.getElementById('clinic'); 
    var visit = document.getElementById('visit'); 

    if((clinic.checked = true) && (visit.checked = true)) 
     { 
     document.getElementById('ClinicFieldSet').style.display='block'; 
     document.getElementById('HospitalFieldSet').style.display='block'; 
     } 
     else if((clinic.checked = true) && (visit.checked = false)) 
     { 
     document.getElementById('ClinicFieldSet').style.display='block'; 
     document.getElementById('HospitalFieldSet').style.display='none'; 
     } 
    else if((clinic.checked = false) && (visit.checked = true)) 
     { 
     document.getElementById('ClinicFieldSet').style.display='none'; 
     document.getElementById('HospitalFieldSet').style.display='block'; 
     } 
     else 
     { 
     document.getElementById('ClinicFieldSet').style.display='none'; 
     document.getElementById('HospitalFieldSet').style.display='none'; 
     } 

HTML

<input type="checkbox" name="type" id="clinic" onClick="dispp();" >Clinic Practice 
<input type="checkbox" name="type" id="visit" onClick="dispp();" >Visiting Hospital 

Answer 1

에서 if 문은 == 항등 연산자를 사용합니다.

le =은 값을 할당하는 데 사용되며 동등성은 테스트하지 않습니다.

HTML :

Answer 2

이

if(clinic.checked == true) 
     { 
     document.getElementById('ClinicFieldSet').style.display='block'; 
     } 
     else 
     { 
     document.getElementById('ClinicFieldSet').style.display='none'; 
     } 
if(visit.checked == true) 
     { 
     document.getElementById('HospitalFieldSet').style.display='block'; 
     } 
     else 
     { 
     document.getElementById('HospitalFieldSet').style.display='none'; 
     } 

Answer 3

난 그냥 자바 스크립트가 좀 더 간단하게, 약간 수정 된 HTML을 (클릭 핸들러를 온라인에서 사용되지 않음) 수정 된 접근 방식을 제시 수보십시오 :

<input type="checkbox" name="type" id="clinic" /><label for="clinic">Clinic Practice</label> 
<input type="checkbox" name="type" id="hospital" /><label for="hospital">Visiting Hospital</label> 

<div id="clinicInfo"> 
    <h2>Clinic information</h2> 
</div> 

<div id="hospitalInfo"> 
    <h2>Hospital information</h2> 
</div> 

자바 스크립트 :

document.getElementById('hospitalInfo').style.display = 'none'; 
document.getElementById('clinicInfo').style.display = 'none'; 

var inputs = document.getElementsByTagName('input'); 

function dispp() { 
    if (this.checked) { 
     document.getElementById(this.id + 'Info').style.display = 'block'; 
    } 
    else { 
     document.getElementById(this.id + 'Info').style.display = 'none'; 
    } 
} 

for (i = 0; i < inputs.length; i++) { 
    if (inputs[i].type.toLowerCase() == 'checkbox') { 
     inputs[i].onchange = dispp; 
    } 
} 

JS Fiddle demo.