checkbox combined with javascript

Question

I want to make a filter which works with a checkbox. When the checkbox is checked it should show some elements and when its not it should hide it.

This is the code I've got so far but I cant get it to work properly. Anyone who can help me out?

The html what got to hide/show

<li class="verwijder" class="kleding"><img class="aanbieding" src="images/jack.png"><span id="timer"></span></li>

The checkbox

<input id="checkboxeten" type="checkbox" name="filter" value="eten"><br>

Javascript

 $(document).ready(function(){
  if (document.getElementById("checkboxeten").checked = true) {
        $( ".kleding" ).show();
    } else {
        $( ".kleding" ).hide();
    }
 });

you're testing the checkbox when the document is loaded, not every time they click it. — Barmar
– Barmar, Commented Oct 30, 2014 at 12:42

adeneo · Accepted Answer · 2014-10-30 12:41:11Z

1

You'll need an event handler for that

$('#checkboxeten').on('change', function() {
    $(".kleding").toggle(this.checked);
});

And you can't have more that one class attribute

<li class="verwijder kleding">

answered Oct 30, 2014 at 12:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brso05 · Accepted Answer · 2014-10-30 12:40:03Z

0

You need to compare using == not =.

Should be:

if (document.getElementById("checkboxeten").checked == true) {

Or:

if (document.getElementById("checkboxeten").checked) {

= is used for assignment. == is used for comparison.

Also you will need an onchange event handler for your checkbox. You should fire this logic not only on page load but also when the checkbox is changed I assume. Or on a button click or some kind of event.

answered Oct 30, 2014 at 12:40

brso05

13.3k2 gold badges25 silver badges41 bronze badges

1 Comment

job Over a year ago

Thanks for the tip! it was not exactly what I was looking for but I learned of it atleast :)

Andrew · Accepted Answer · 2014-10-30 13:45:13Z

0

Replace <li class="verwijder" class="kleding"> with <li class="verwijder kleding">
Using my updated jquery code.
Here is working example (http://jsfiddle.net/yqkLpn6s/2/) FIDDLE

edited Oct 30, 2014 at 13:45

Andrew

5,10415 gold badges44 silver badges60 bronze badges

answered Oct 30, 2014 at 13:01

Lumi Lu

3,3011 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

checkbox combined with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related