jQuery Forum

Hi,

 

try a more jQuer'ish style:

 

1. $(document).ready(function(){
2.     $("#club-team").bind("click", function(e){
3.         if($(this).attr("checked")){
4.             $("#logo_img").attr('src', 'club.jpg');
   
5.         }
6.         else{
7.             ...
8.         }
9.     });
10. });

for instance. You should add a path to your images /my/picture/club.jpg

Kind Regards

--Andy

you can bind "change" instead of "click" aswell.

 

And.. you maybe want to call e.preventDefault() within the event handler.

I was able to get it working like so:

1. $("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');
           }
       });
2. 
   
3. <input type="radio" class="team_kind" name="team_kind" id="club-team" value="1" checked="checked" />
4. <label for="club-team">Club</label>
5. 
   <input type="radio" class="team_kind" name="team_kind" id="rival-team" value="2" />
6. <label for="rival-team">Rival</label>
   

But now I tried to do the next step which was using jquery ui. I used the following to add theme buttons to the radio buttons. This creates some problems. It mostly disables the radio buttons and uses the labels. I went through the code and realized it uses the attribute aria-pressed="true" on the label for selection. So I did the following but it doesn't seem to work.

1. $("#team_kind-radio").buttonset();
2. $("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');
           }
       });
3. 
   
4. <input type="radio" name="team_kind" id="club-team" value="1" checked="checked" />
5. <label class="team_kind" for="club-team">Club</label>
6. 
   <input type="radio" name="team_kind" id="rival-team" value="2" />
7. <label for="rival-team">Rival</label>