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;
});