Javascript Hide/show Div On Checkbox: Checked/unchecked

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 func

Solution 1:

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 = functiondoruc() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();

Demo

Solution 2:

Try this:

elem.style.display='block'

Solution 3:

You should write it like this :

functiondoruc() {
var elem = document.getElementById('powermail_fieldwrap_331');
    if (document.getElementById ('powermail_field_doruovaciaadresa2_1').checked) {
    elem.style.display='block';
    } else {elem.style.display='none';}}

and regarding your second question, you can either write in the div tag style="display:none" or you can do as you said (add a class for the element).

Solution 4:

You are correct in using display: none; to hide your DIV initially.

As for your checkbox, try removing the spaces between getELementById and ('powermail_field...

Also you need to change:

} else {elem.display:none;}

to:

} else {elem.display = 'none';}