Get clicked element in ButtonSet

I would like to know which element is clicked so I can change its CSS class. Here is the code:

<script type="text/javascript">
      $(function() {
       $("#radio").buttonset();
      });
</script>

<div id="radio">
   <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
   <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</labe开发者_如何学JAVAl>
   <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

jQuery events returns this as the object which fired the event. So you just have to check this.

Having this set of elements

<div id="radio">
   <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
   <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
   <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

Select all radio elements:

$("#radio :radio")

Then bind an event:

.click(function(e) { });

Retrieve the element with this:

$("#radio :radio").click(function(e) {
    var rawElement = this;
    var $element = $(this);

    /* Do stuff with the element that fired the event */
});

Example on jsFiddle.

You can find here functions to manipulate the element's class.

You can also retrieve the selected radio button out of the buttonset using:

$j("#radioset :radio:checked")

then do whatever you want with the element...

You can do like:

$("#radio :radio").click(function(){
   alert($(this).attr("id")); // this refers to current clicked radio button
   $(this).removeClass('class_name').addClass('class_name');
});

$("#radio :radio").click(function(){
    //alert($(this).attr("id"));
});

$('#radio').bind('click', function(event){
       $('#radio').removeClass('selected');
       $(this).addClass('selected');
});

$('#radio').buttonset().find(':radio').click(function(e) {
    var $radio = $(this);
    $radio.addClass('active');
});