I am trying to display a div on click of a checkbox

Question

I need to display an image and some info about the item when a checkbox is clicked. For some reason nothing is happening and I have been tweaking this for a while with no response whatsoever. Here is my javascript:

<script type = "text/javascript">
    function displayOnChecked(var checkboxID, var id) {
        if(document.getElementById(checkboxID)) {
            document.getElementById(id).style.display = "block";
        } else {
            document.getElementById(id).style.display = "none";
        }
    }
</script>

In the stylesheet I have it on display: none;

Here is one of my invocations:

<input type="checkbox" name="purchasedItem" id = "item" onclick="displayOnChecked('item', 'itemInfo');">

Hit f12 and look at the console in your browser of choice. Do you see any errors? (hint you should see something to the effect of `Uncaught SyntaxError: Unexpected token var` because you are defining your function wrong remove the var.) — scrappedcola, Feb 08 '16 at 21:06
Possible duplicate of [Hide / Display div based on checkbox click. Works in jsFiddle, but won't on my site. Any ideas?](http://stackoverflow.com/questions/18835271/hide-display-div-based-on-checkbox-click-works-in-jsfiddle-but-wont-on-my-s) — BSMP, Feb 08 '16 at 21:08
Why are you passing `item` to the function and then checking for its existence when the checkbox itself is `id=item`? — Will, Feb 08 '16 at 21:09
Possible duplicate of [javascript Hide/show div on checkbox: checked/unchecked](http://stackoverflow.com/questions/19734907/javascript-hide-show-div-on-checkbox-checked-unchecked) — Peyman Mohamadpour, Feb 08 '16 at 21:13
Y don't you people use [Google](https://www.google.com/search?sclient=psy-ab&site=&source=hp&q=display+a+div+on+click+of+a+checkbox+JavaScript&btnK=Google+Search)? — Peyman Mohamadpour, Feb 08 '16 at 21:14

score 2 · Accepted Answer · answered Feb 08 '16 at 21:05

2

No need for the var keyword in the arguments list of displayOnChecked, just have the variable names alone.

If you look in your console, you should be getting an error: Uncaught SyntaxError: Unexpected token var

answered Feb 08 '16 at 21:05

Hatchet

5,320
1
30
42

Omg! Thank you! Such a dumb little mistake. – Griffin Obeid Feb 08 '16 at 21:07
@GriffinObeid, if this fixed it, you may check this as the correct answer for further reading – Mi-Creativity Feb 08 '16 at 22:56
It is not an answer but rather a comment. There is still an issue. The author checks existence of the checkbox not that the checkbook is checked. @AliKhanusiya provides a possible fix of that – Alexander Elgin Feb 09 '16 at 02:13

score 0 · Answer 2 · answered Feb 08 '16 at 21:07

0

You don't intialize variables as function arguments:

function displayOnChecked(var checkboxID, var id)

should be

unction displayOnChecked(checkboxID, id)

answered Feb 08 '16 at 21:07

Cedric Ipkiss

5,662
2
43
72

score 0 · Answer 3 · answered Feb 08 '16 at 21:15

You can achieve this, just using the CSS pseudo-element :checked:

.checkmeout {
display: none;
position: absolute;
top: 12px;
left: 150px;
width: 400px;
height: 100px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}

.checkmeout img {
display: block;
width: 200px;
height: 50px;
background-color: rgb(0,0,255);
}

.checkme:checked ~ .checkmeout {
display:block;
}

<form>
<input type="checkbox" name="checkme" class="checkme" /> Check Me

<div class="checkmeout">
<img src="" alt="Check Me Out Image" />
<p>Check Me Out Text Description</p>
</div>
</form>

I am trying to display a div on click of a checkbox

3 Answers3