CODEWITHSUNDEEP
javascriptformscheckboxhidden
Shaughn Williams
Shaughn Williams

Reputation: 121

What's wrong here? Checkboxes aren't working

I'm trying to make checkboxes to hide/show paragraphs, but for some reason, the paragraphs don't appear when I click the checkbox, here is the JavaScript code:

function showPara()
{
    document.getElementById("first").style.visibility=(document.formex.firstpara.checked) ? "block" : "hidden";
    document.getElementById("second").style.visibility=(document.formex.secondpara.checked) ? "block" : "hidden";
    document.getElementById("third").style.visibility=(document.formex.thirdpara.checked) ? "block" : "hidden";
    return true:
}

Here is the HTML code:

<p id="first">This is a paragraph</p>
<p id="second">This is a paragraph</p>
<p id="third">This is a paragraph</p>

<form name="formex">
    <input type="checkbox" name="firstpara" onClick="showPara();"/>First Paragraph<br />
    <input type="checkbox" name="secondpara" onClick="showPara();"/>Second Paragraph<br />
    <input type="checkbox" name="thirdpara" onClick="showPara();"/>Third Paragrpah<br />
</form>

Upvotes: 0

Views: 121

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

There is no visibility: block, so hidden is not being altered. Use visibility: visible. You also have a syntax error in the function (return true; vs. return true:).

http://jsfiddle.net/frKXN/1/

Upvotes: 5

Hazzit
Hazzit

Reputation: 6882

The visibility CSS property can have two values: hidden or visible.

You are setting it to block, which doesn't work. You probably confused it with the display property, which can be set to block, none and a few other values.

Upvotes: 2

Related Questions