making the checkbox to display div

here am trying to display divs ClinicFieldSet and HospitalFieldset by selecting the given text boxes. If both are selected, both ClinicFieldset and HospitalFieldset should display and if one of the check box is selected it should show which div is selected.

The problem with my script is, when one of the checkboxes are clicked, both checkboxes are getting selected and it is not posible to uncheck them also. So please suggest me an idea to fix this problem :(

I used Javascript onClick in both checkboxes to apply on both of them.

<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.getElementBy开发者_开发问答Id('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

---

In your if statement use the == equality operator.

The single = is used to assign a value, not test its equality.

---

May I suggest a revised approach (not using in-line click-handlers) with a slightly amended html, just to make the JavaScript somewhat more simple:

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.

---

Try this

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

---

var form=document.forms.add form.elements.check.addEventListener('change',function(e) { e.preventDefault() var check=document.querySelector('.check') if(check.checked=true) { document.querySelector('.inside').style.display='block' } else{ document.querySelector('.inside').style.display='none' } })