Change color <li>

Question

I'm building a survey and what I'm trying to do now is that when someone clicks an answer (for example: 8) in my list, the background of that answer changes color. This has to work for each seperate answer (there are 60 questions).

The list html/css code:

<div class="answers">
    <ul>
        <li class="liFirst">1</li>
        <li class="liMiddle">2</li>
        <li class="liMiddle">3</li>
        <li class="liMiddle">4</li>
        <li class="liMiddle">5</li>
        <li class="liMiddle">6</li>
        <li class="liMiddle">7</li>
        <li class="liMiddle">8</li>
        <li class="liMiddle">9</li>
        <li class="liLast">10</li>
    </ul>
</div>

.answers {
  float: right;
  width: 400px;
  height: auto;
  margin: 0;
  background: #DFE5E3;
}

.answers ul {
  display: inline-block;

}

.answers li {
  float: left;
  padding: 0 auto; 
  font-weight: bold;
}

I've already researched it a bit but can't seem to find a solution that works. I suppose I have to do this in JS/jQuery?

Tried this solution: link! but didn't seem to work for me

Answer 1

add an active class

.active{
    background:#000;
    color:#FFF;
}

and in jquery toggle class

$('ul li').on('click',function(){
   $(this).toggleClass('active');
});

if he wants to choose only one answer

$('ul li').on('click',function(){
   $(this).toggleClass('active').siblings().removeClass('active');
});

Answer 2

You can do this with the following:

JQuery

$(document).on('click', '.answers ul li', function(){
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

CSS

.answers li.selected {
    background: yellow;
}

You probably want to remove the selected background effect one other <li> s once you click on one.

DEMO

Answer 3

If you want to stay strictly CSS based, this checkbox hack may be your best bet... http://css-tricks.com/the-checkbox-hack/

Which can also be implemented with radio buttons to ensure only one answer can be chosen.

Answer 4

jQuery

$( "ul" ).on( "click", "li", function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
});

CSS

.selected { background-color:lime;}  

JSFiddle Demo