CODEWITHSUNDEEP
javascripthtml
Bala
Bala

Reputation: 3638

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.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

Upvotes: 1

Views: 3235

Answers (4)

Olanipekun Seun
Olanipekun Seun

Reputation: 1

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

Upvotes: 0

Fahad Hussain
Fahad Hussain

Reputation: 1185

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 1

Nettogrof
Nettogrof

Reputation: 2136

In your if statement use the == equality operator.

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

Upvotes: 3

Related Questions