Select only one radio button from muliple radio buttons

Question

I have converted two picklists into radio buttons. I want to select only one radio button from two radio button groups. I also write jquery for this two group but it's not working. please help me out.

//----------apex code--------------

public List<SelectOption> getTemplate(){
  List<SelectOption> options = new List<SelectOption>();
  Schema.sObjectType sObject_Type = Proposal_Version__c.getSObjectType();
  Schema.DescribeSObjectResult sObject_Result = sObject_Type.getDescribe();
  Map<String,Schema.SObjectField> fieldMap = sObject_Result.fields.getMap();
  List<Schema.PicklistEntry> picklist_values = fieldMap.get('Template__c').getDescribe().getPickListValues();
  for (Schema.PicklistEntry a : picklist_values) {
  options.add(new selectOption(a.getLabel(),a.getValue()));
  }
  return options;

  }
  public List<SelectOption> getTemplateBundeles(){
  List<SelectOption> options = new List<SelectOption>();
  Schema.sObjectType sObject_Type = Proposal_Version__c.getSObjectType();
  Schema.DescribeSObjectResult sObject_Result = sObject_Type.getDescribe();
  Map<String,Schema.SObjectField> fieldMap = sObject_Result.fields.getMap();
  List<Schema.PicklistEntry> picklist_values = fieldMap.get('Template_Bundles__c').getDescribe().getPickListValues();
  for (Schema.PicklistEntry a : picklist_values) {
  options.add(new selectOption(a.getLabel(),a.getValue()));
  }
  return options;

  }

//----- Vf code--------

<apex:pageBlockSection title="Template Hosting Fees" columns="1" > 
  <apex:pageBlockSectionItem > 
  <apex:outputLabel >Template</apex:outputLabel>
  <apex:selectRadio styleClass="TemplateGroup" id="IdRedioBtnTemplateHostingFee" value="{!ProposalVersion.Template__c}" onchange="test(this);">
  <apex:selectOptions value="{!Template}"></apex:selectOptions>
  </apex:selectRadio>
  </apex:pageBlockSectionItem>
  <apex:pageBlockSectionItem >
  <apex:outputLabel >OR</apex:outputLabel>
  <apex:outputLabel ></apex:outputLabel>
  </apex:pageBlockSectionItem>
  <apex:pageBlockSectionItem > 
  <apex:outputLabel >Multiple Tamplates</apex:outputLabel>
  <apex:selectRadio styleClass="TemplateGroup" id="IdRedioBtnHostingBundles" value="{!ProposalVersion.Template_Bundles__c}" onchange="test(this);">
  <apex:selectOptions value="{!TemplateBundeles}"></apex:selectOptions>
  </apex:selectRadio>
  </apex:pageBlockSectionItem>  
  </apex:pageBlockSection>
//------- Jquery-----
function test(sender){            
   $('.TemplateGroup').find('input:radio').each(function(){
         $(this).prop('checked', false);
   });
   $(sender).prop('checked', true);
}

Answer 1

With jQuery you can easily do this. Just deselect all radio buttons in the first set on the change event of other Radio set and vice versa.

<apex:page >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <apex:form >
        <apex:selectRadio id="IdRedioBtnTemplateHostingFee">
            <apex:selectOption itemLabel="radio1" itemValue="radio1"/>
            <apex:selectOption itemLabel="radio2" itemValue="radio2"/>
            <apex:selectOption itemLabel="radio3" itemValue="radio3"/>
        </apex:selectRadio>
        <apex:selectRadio id="IdRedioBtnHostingBundles">
            <apex:selectOption itemLabel="radio4" itemValue="radio4"/>
            <apex:selectOption itemLabel="radio5" itemValue="radio5"/>
            <apex:selectOption itemLabel="radio6" itemValue="radio6"/>
        </apex:selectRadio>        
    </apex:form>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {  
            $j('input:radio[name$=IdRedioBtnTemplateHostingFee]').change(function(){ 
                 $j('input:radio[name$=IdRedioBtnHostingBundles]').removeAttr('checked');
            });
            $j('input:radio[name$=IdRedioBtnHostingBundles]').change(function(){ 
                 $j('input:radio[name$=IdRedioBtnTemplateHostingFee]').removeAttr('checked');
            });        
        });
    </script>
</apex:page>