change css class onclick

change css class onclick

Greets! First post here so hopefully I wont' sound too confused..

I have a set of links in a named div. each link has a specific css classname to emulate a button. Basic css menu thingy.

<div id="buttonwrapper" class="buttonwrapper">

<a id='one' class="squarebutton" href="#" onclick="javascript:dosomething('one')" style="margin-left: 6px"><span>ONE</span></a>

<a id='two' class="squarebutton" href="#" onclick="javascript:dosomething('two')" style="margin-left: 6px"><span>Two</span></a>

<a id='three' class="squarebutton" href="#" onclick="javascript:dosomething('three')" style="margin-left: 6px"><span>THREE</span></a>
</div>


The "dosomething()" function just submits the page with specific querystring values back to itself to query a database as well as a couple other things:
// reload the grid with just a selected users tickets - default Open   
function dosomething(x)
{
   // assign our current user to the global var
   theuser=x;
   
   //call our php sql program with this user as a filter
   location.href="thispage.php?u="+x;
   
      
   // now set the status radio button Open checked. by default we always show open tickets first
   $('#stat[value=Open]').attr('checked', true);

}



I have two css classes that either show a silver button (squarebutton) for each link by default or, if clicked, the link will be a blue button (bsquarebutton) showing that it was last clicked/is active. Each class has all .a behaviors defined such as active/hover/etc. The only difference is a button graphic.

I have tried more things than I can think of, worn my fingertips off Googling possible ways to do this...currently, I'm down to a simple function to just change the class of a clicked link and it doesn't work.

in my DOM ready function:

$('.buttonwrapper squarebutton a').click(function() {
   $(this).removeClass("squarebutton");
    $(this).addClass("bsquarebutton");
});


I've tried variations to the theme, tried also to loop through all "a" elements in $(.buttonwrapper) and so on. I'm missing something here on a conceptual level.

1) I want to change any "a" element in the .buttonwrapper/#buttonwrapper DIV to 'squarebutton' if it is already 'bsquarebutton'. If I don't do this all my buttons will end up 'bsquarebutton' eventually.

2) I want to click a button/link and have it change to 'bsquarebutton' class from the default 'squarebutton' class.

How can I do this with JQuery?

thanks,
Steve


PS: OH, while I'm here.
You saw in my dosomething(x) function this line:

$('#stat[value=Open]').attr('checked', true);


if I wanted to change the element #stat that had the value of "x" that had been passed to that function, what would the syntax be for that?

something like?
$('#stat[value='+x+']').attr('checked', true);


Actually, I probably should dispense of that function entirely and use a JQuery click function defined in my DOM ready function, yes?

thx again.


[/code]