form buttons where only one can be selected

Hi i have the following page coded but the form is not right. i need the bottom section 3x buttons that say gas / electricty / both to only be able to select one a开发者_开发问答t a time.

url: http://www.comparebusinessenergy.co.uk/april/

i understand i can achieve this by jquery with something like this:

but i cant work it out for the life of me

$('ul li').click(function(){
      $('ul li.selected').removeClass('selected');
      $(this).addClass('selected');
      return false;
});

Try this for size:

$('#gas,#electric,#both').click(function(){
  $('#gas,#electric,#both').removeClass('on').addClass('off');
  $(this).addClass('on');
  return false;
});

I think you were getting your selectors wrong. The way this is working is that you select using css style selectors, then operate on the jQuery objects that are created.

You'll want to be toggling between the on and off classes. Just change $(this).addClass('selected') to:

$(this).toggleClass('on');
$(this).toggleClass('off');

Make sure that the correct class is set initially.

$('ul li:selected').removeClass('selected');

try that

 $('ul li').click(function(){
      $('ul li').removeClass('selected');
      $(this).addClass('selected');
      return false;
});