使複選框顯示div

在這裏我試圖通過選擇給定的文本框顯示div ClinicFieldSet和HospitalFieldset。如果選擇了兩者，則應顯示ClinicFieldset和HospitalFieldset，如果選中其中一個複選框，則應顯示選中哪個div。使複選框顯示div

我的腳本存在的問題是，當單擊其中一個複選框時，兩個複選框都將被選中，並且也不可能取消選中它們。所以，請建議我一個想法來解決這個問題:(

我使用的JavaScript的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

來源

2011-09-28 Bala.C

在您的if語句使用==平等運算符。

The sing使用來分配一個值，而不是測試它的相等性。

來源

2011-09-28 13:01:35 Nettogrof

哎呀，我的錯誤...它的工作..感謝很多nettogrof –

試一下這個

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'; 
     }

來源

2011-09-28 13:11:55

我可以提出一個修訂的方法（不使用在線點擊處理程序）一個稍微修改HTML，只是爲了讓JavaScript的稍微更簡單：

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>

的JavaScript：

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。

來源

2011-09-28 13:15:54

使複選框顯示div

回答

相關問題