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.