Toggle background image when checkbox checked

Question

I need the background image of list items toggled when check box is checked.

HTML:

<input type="checkbox" class="checkbox" value="yes" id="answer" name="answer" data-label="I am over the age of 18" />
<div class="categories row-fluid">
    <div class="span4">
        <ul>
            <li>Full Name</li>
            <li>Current Address</li>
            <li>Address History</li>
        </ul>
    </div>
    <!-- /.span12 -->
</div>

CSS:

.categories ul li {
    background:url(http://s21.postimg.org/j4dl4r30z/pretty_Checkbox.png) no-repeat;
    background-position: 0px 0px;
    padding-left:30px;
    list-style:none;
}

JS:

$('input:checkbox').click(function(){
    $('.categories ul li').css("background-position", "0px -32px");  
});

This is not working, I'm not sure if it has syntax errors.

I created a jsFiddle here:http://jsfiddle.net/kikix2125/McLeC/

What do you mean by not working?

MD Sayem Ahmed
– MD Sayem Ahmed

2013-11-19 17:23:08 +00:00
Commented Nov 19, 2013 at 17:23 — MD Sayem Ahmed
– MD Sayem Ahmed, Commented Nov 19, 2013 at 17:23
He meant he did not include jQuery to the fiddle.

patryk
– patryk

2013-11-19 17:25:45 +00:00
Commented Nov 19, 2013 at 17:25 — patryk
– patryk, Commented Nov 19, 2013 at 17:25

PSL · Accepted Answer · 2013-11-19 17:23:26Z

2

How about a css way and a toggle class:

CSS:

.categories ul li {
    background:url(http://s21.postimg.org/j4dl4r30z/pretty_Checkbox.png) no-repeat;
    background-position: 0px 0px;
    padding-left:30px;
    list-style:none;
}
.categories ul li.active{
   background-position: 0px -32px;
}

JS:

  $('.checkbox').click(function(){
     $('.categories ul li').toggleClass("active");  
  });

Demo

answered Nov 19, 2013 at 17:23

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Jordan Running · Accepted Answer · 2013-11-19 17:28:25Z

0

Unless you're targeting versions of IE before 9 you don't need any JavaScript to do this; just use the :checked pseudo-class:

.categories li {
  background: url(http://s21.postimg.org/j4dl4r30z/pretty_Checkbox.png) no-repeat;
  background-position: 0px 0px;
  padding-left: 30px;
  list-style: none;
}

#answer:checked + .categories li {
  background-position: 0px -32px;
}

Take a look at the fiddle.

answered Nov 19, 2013 at 17:28

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

Collectives™ on Stack Overflow

Toggle background image when checkbox checked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related