Question

74

javascript Hide/show div on checkbox: checked/unchecked

rated 0 times [ 79] [ 5] / answers: 1 / hits: 21160 / 11 Years ago, fri, november 1, 2013, 12:00:00

I am trying to make a function in javascript, that will hide / show particular div in my registration form, depending on the state of my checkbox (checked or not).
Here is my function:

 function doruc() {

    var elem = document.getElementById('powermail_fieldwrap_331');

        if (document.getElementById  ('powermail_field_doruovaciaadresa2_1').checked) {

        elem.display='block';

        } else {elem.display:none;}

}

It isnt working. I am checking and unchecking my checkbox, but nothing happens. Oh and one more thing. I want that div to be initialized as hidden. Should I put in my css this? :

 #powermail_fieldwrap_331{

 display:none;

 }

I would highly appreciate any suggestions.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarrodfletchers

Add To Favorites

Follow

Total Points: 75

Total Questions: 94

Total Answers: 95

Location: Netherlands

Member since Thu, Jul 1, 2021

3 Years ago

answered 11 Years ago kaitlynnb · Accepted Answer

You could use

var elem = document.getElementById('powermail_fieldwrap_331');

document.getElementById('powermail_field_doruovaciaadresa2_1').onchange = function() {

    elem.style.display = this.checked ? 'block' : 'none';

};

Demo

If you want to hide it by default, you could use #powermail_fieldwrap_331{display:none;}. But if you want to be sure, better use

var elem = document.getElementById('powermail_fieldwrap_331'),

    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');

checkBox.checked = false;

checkBox.onchange = function doruc() {

    elem.style.display = this.checked ? 'block' : 'none';

};

checkBox.onchange();

Demo