swap image on change radio buttonset

swap image on change radio buttonset

Hello,
I have this code that switches an image on radio button change. I then applied jquery ui buttonset to the radio button and now it's not working. Here is the code I used:
  1. $("input.team_kind").change(function(){
  2.         if ($("input.team_kind:checked").val() == 1) {
  3.             $('#logo_img').attr('src', 'assets/images/teams/club_logo.png');
  4.         }
  5.         else {
  6.             $('#logo_img').attr('src', 'assets/images/teams/rival_logo.png');
  7.         }
  8. });

  9. <input type="radio" class="team_kind" name="team_kind" id="club-team" value="1" checked="checked" />
    <label for="club-team">Club</label>

  10. <input type="radio" class="team_kind" name="team_kind" id="rival-team" value="2" />
    <label for="rival-team">Rival</label>



I realized that the buttonset disables the radio input and uses the label tag for selection. I noticed that it uses a specific attribute called "aria-pressed" and sets it to equal "true" or "false". So I thought maybe I could use this to swap the image. So I tried the following code but it didn't work:
  1. $("#team_kind-radio").buttonset();
        
    $("label.team_kind").change(function(){
            if ($("label.team_kind").attr('aria-pressed') == true) {
                $('#logo_img').attr('src', 'assets/images/teams/auajrs_logo.png');
            }
            else {
                $('#logo_img').attr('src', 'assets/images/teams/rival_logo.png');
            }
    });









  2. <div id="team_kind-radio">
            <input type="radio" name="team_kind" id="club-team" value="1" checked="checked" />
  3.         <label class="team_kind" for="club-team">Club</label>

  4.         <input type="radio" name="team_kind" id="rival-team" value="2" />
  5.         <label for="rival-team">Rival</label>
    </div>

What am I doing wrong?