I did this code up trying to hide a select input field until the check box is checked. It works but when the page first loads these are all visible. I need them invisible until the check box is filled in. If I load the page then click the checkbox and then uncheck the check box the object disappears so I know it's working but why does it appear at the begiing and more importantly how do I stop it from doing that?
Code:
<input type="checkbox" id="pizza22" onclick="doruc()" name="halfHalf2" />
function doruc() {
var elem = document.getElementById("secondhalf1"),
checkBox = document.getElementById("pizza11");
elem.style.display = checkBox.checked ? 'block' : 'none';
};