[SalesForce] javascript show a div while check radio button

I have 3 radio buttons, and when I select one I want that the div corresponding div shows up.

<apex:form >
<apex:selectRadio value="{!livraison}" layout="pageDirection" id="radios">
<apex:selectOption id="a" itemLabel="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}" itemValue="{!$Label.EXT_LIVRAISON_TRANSPORTEUR}"/>
<apex:selectOption id="b" itemLabel="{!$Label.EXT_ENLEVEMENT_LABO}" itemValue="{!$Label.EXT_ENLEVEMENT_LABO}"/>
<apex:selectOption id="c" itemLabel="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}" itemValue="{!$Label.EXT_CMD_JOINDRE_CONSEILLERE}"/>
</apex:selectRadio>
</apex:form>

<div id="diva">
blabla
</div>
<div id="divb">
blabla
</div>
<div id="divc">
blabla
</div>

<script type="text/javascript">
$(document).ready(function() { //cache les 3 div dès le départ
            $('#diva').hide();
            $('#divb').hide();
            $('#divc').hide();
        });
        $('[id$=a]').change(function() {
            if(this.checked) {
                $('#diva').show();
                $('#divb').hide();
                $('#divc').hide();
            }
        });
        $('[id$=b]').change(function() {
            if(this.checked) {
                $('#divb').show();
                $('#diva').hide();
                $('#divc').hide();
            }
        });
        $('[id$=c]').change(function() {
            if(this.checked) {
                $('#divc').show();
                $('#diva').hide();
                $('#divb').hide();
            }
        });
</script>

So here was my code, I don't get what I'm doing wrong… Thank you for your help 🙂

Best Answer

I have modified your code as below and it is working as you have described. Hope this will help.

<apex:form >
    <apex:selectRadio layout="pageDirection" id="radios">
        <apex:selectOption itemLabel="radio1" itemValue="radio1"/>
        <apex:selectOption itemLabel="radio2" itemValue="radio2"/>
        <apex:selectOption itemLabel="radio3" itemValue="radio3"/>
    </apex:selectRadio>
</apex:form>

<div id="diva">
    diva
</div>
<div id="divb">
    divb
</div>
<div id="divc">
    divc
</div>

<script type="text/javascript">
        $(document).ready(function() {
            jQuery('[id$=diva]').hide();
            jQuery('[id$=divb]').hide();
            jQuery('[id$=divc]').hide();
            jQuery('input:radio[name$=radios]').change(function(){       
                var radio_value= $(this).val();
                if(radio_value=='radio1'){
                    jQuery('[id$=diva]').show();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').hide();                
                }else if(radio_value=='radio2'){
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').show();
                    jQuery('[id$=divc]').hide();                
                }else{
                    jQuery('[id$=diva]').hide();
                    jQuery('[id$=divb]').hide();
                    jQuery('[id$=divc]').show();                
                }
            });
        });        
</script>
Related Topic