[SalesForce] Displaying Picklist as radiobutton on VF

I have a picklist with values as yes and no. On my vf i need to display the same as radio buttons and while saving the values i need to save them as picklist values from th controller.

Best Answer

You can change the dropdown to radio buttons with JavaScript also. First hide the dropdown, then take the data out of the elements and create the <input type="radio"/><label/><br/> for each one. On click of the radio, you have to update the dropdown so that it will save the correct data.

This solution is based on this stackoverflow link. 

<apex:page standardController="Book__c" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <apex:form id="myForm">
        <apex:inputField value="{!Book__c.Country__c}" id="picklistfield"/>
        <apex:commandButton value="Save" action="{!Save}" />
    </apex:form>
    <script type="text/javascript">
        //Hide the picklist
        $('[id$=myForm] select').hide();
        //Get Exising Select Options    
        $('[id$=myForm] select').each(function(i, select){
            var $select = $(select);
            $select.find('option').each(function(j, option){
                var $option = $(option);
                // Create a radio:
                var $radio = $('<input type="radio" />');
                // Set name and value:
                $radio.attr('name', $select.attr('name')).attr('value', $option.val());
                // Set checked if the option was selected
                if ($option.attr('selected')) $radio.attr('checked', 'checked');
                // Insert radio before select box:
                $select.before($radio);
                // Insert a label:
                $select.before(
                    $("<label/>").attr('for', $select.attr('name')).text($option.text())
                );
                //Update the hidden picklist with selected radio value
                $radio.click(function () {
                    $('[id$=myForm] select').val($(this).val());
                })
                // Insert a <br />:
                $select.before("<br/>");
            });
        });            
    </script>
</apex:page>
Related Topic