Question

here are two jquery codes

code 1

$(document).ready(function() { 
    $("div.imgDisp").hide();
    $('[id="' + $(":radio:checked").val()+'"]').show();
    $(":radio").click(function() {      
        $("div.imgDisp").fadeOut('slow');
        $('[id="' + $(this).val()+'"]').fadeIn('slow');
    });
});

This code hides the divs on selecting a radio button
check this fiddle http://jsfiddle.net/nanoquantumtech/qudT2/3/

in this fiddle you can see a set of radios under name = “type”. All works well till here..

there are other set of radio buttons as well under different names.. now the problem is that when i click any of those radio buttons under diffrent names, and although they are not related anyway to this fiddle code clicking them nullify the effect of this fiddle and the desired effect of this fiddle just vanishes.
i.e. if i click on any other radio button other then those shown in fiddle, they make the displayed result hide, while the result in fiddle shall stay on screen. I m surprised..

same problem is with another jquery code i have used to show/hide a textfiled.. [I M OMITTING ANOTHER CODE CUZ THE PROBLEM IS SAME WITH THAT CODE ALSO]

what could be wrong guys? thanks in advance..

Answer 1

problem here is you are calling click event for all radio i.e $(":radio").click(function() { .. specify thhe click event to those radios only whose name="type"..

$('input[name="type"]:radio').click(function() {.... });

try this

$('input[name="type"]:radio').click(function() {
    $("div.imgDisp").fadeOut('slow');
    $('[id="' + $(this).val()+'"]').fadeIn('slow');
});    

this will only call the click event for input whose name=”type” and radio .

fiddle here