Search code examples
phpjqueryradiobuttonlist

Jquery + radiobutton


I have 4 radio buttons.if i click on 1 radio button then 1 div should be open and if click on 2nd radio button then 2nd number should be open...

here is my code for radio button

<div class="fLeft">
<div class="clear"><input type="radio" name="ResumeEmail[cv_format]" value="pdf" id="ResumeEmail_cv_format_0"><label for="ResumeEmail_cv_format_0" style="padding-top:0px;">PDF</label></div><br>
<div class="clear"><input type="radio" name="ResumeEmail[cv_format]" value="word" id="ResumeEmail_cv_format_1"><label for="ResumeEmail_cv_format_1" style="padding-top:0px;">WORD</label></div><br>
<div class="clear"><input type="radio" name="ResumeEmail[cv_format]" value="rtf" id="ResumeEmail_cv_format_2"><label for="ResumeEmail_cv_format_2" style="padding-top:0px;">RICH TEXT</label></div><br>
<div class="clear"><input type="radio" name="ResumeEmail[cv_format]" value="custom" id="ResumeEmail_cv_format_3"></div>                                     </div>

ANSWER I GOT IT

<script type="text/javascript">
$(document).ready(function() {
   // do stuff when DOM is ready
    $('#ResumeEmail_cv_format_0').click(function() {     
        var checked = $(this).attr('checked', true);
        if(checked)
        { 
            $("#view_resume").show();
        }
        else
        { 
            $("#view_resume").hide();
        }
    });
 });
</script>

Now I wnat that if i click any 1 from first,second and third radio button .that div should open other not


Solution

  • $("#div1").hide();
    $("#div2").hide();
    $('#radiobutton1').click(function() {     
        var checked = $(this).attr('checked', true);
        if(checked)
        { 
            $("#div1").show();
        }
        else
        { 
            $("#div1").hide();
        }
    });
    $('#radiobutton2').click(function() {     
        var checked = $(this).attr('checked', true);
        if(checked)
        { 
            $("#div2").show();
        }
        else
        { 
            $("#div2").hide();
        }
    });