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:
- $("input.team_kind").change(function(){
- if ($("input.team_kind:checked").val() == 1) {
- $('#logo_img').attr('src', 'assets/images/teams/club_logo.png');
- }
- else {
- $('#logo_img').attr('src', 'assets/images/teams/rival_logo.png');
- }
- });
- <input type="radio" class="team_kind" name="team_kind" id="club-team" value="1" checked="checked" />
<label for="club-team">Club</label>
<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:
- $("#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');
}
});
- <div id="team_kind-radio">
<input type="radio" name="team_kind" id="club-team" value="1" checked="checked" />
- <label class="team_kind" for="club-team">Club</label>
<input type="radio" name="team_kind" id="rival-team" value="2" />
- <label for="rival-team">Rival</label>
</div>
What am I doing wrong?