更改点击元素的样式

Question

Here is very newbie problem.
There is three options like checkbox in demo . When the option is clicked, i want to change background color of clicked option like checkbox.
I couldn't figure out the problem due to the id of the options are same which is option .

Answer 1

A possible implementation in query could be:

$(document).ready(function(){
    $(".myCheckboxClass").bind('click', function(){
        $(this).css('background-color', 'red');
    });

});

You can basically do the same in js, just check the proper syntax. The key thing is the "this" selection of the clicked element.

Answer 2

use class instead of id , since (as its name already says) id must be unique, otherwise it is not an id anymore..

repaired and working version: http://jsfiddle.net/hvWeG/5/

$(function(){
  $('.option').on('click',function(){
   $(this).css('background-color','yellow');
  });
});

html

<ul style="display:block;" id="options">
    <li class="option">Cucumber</li>
    <li class="option">Tomato</li>
    <li class="option">Potato</li>
</ul>

Answer 3

Check this out check edited Code here

1> First of all your fucntion should be in head,in jsfiddle near the left top corner change the onload to no wrap in head ,

2> you dont need script tag in onclick

3> document.getElementById('option') will select only the first element with id 'option' Check the following code , i have made some minor changes to your code. check edited Code here