+ Start a Discussion
prazonprazon 

Using checkbox as radio button

Hi Guys,

 

I have this requirement, any idea how can I make use of checkboxes as radio buttons ? I don't need radio buttons

 

 

Starz26Starz26

If you do not need radio buttons then why would you need to use a checkbox as a radio button???

 

Only differenct in your statement is they style of filled in circle vs square with checkmark. You are still asking for a radio button

prazonprazon

because there are some existing functionality which should remain intact associated with it

Meer SalmanMeer Salman

Please make it more clear, where and how do you want to use checkbox?

prazonprazon

I should be able to check only one checkbox at a time..simple

Meer SalmanMeer Salman

Have you created your own visualforce page? If you have your own visualforce page than you can do something like this.

 

<apex:page>
    
    <script type="text/javascript">     
        function SetCheckBoxes(input)
        {
            document.getElementById('{!$Component.MyForm:chk1}').checked=false;
            document.getElementById('{!$Component.MyForm:chk2}').checked=false;
            document.getElementById('{!$Component.MyForm:chk3}').checked=false;
            document.getElementById('{!$Component.MyForm:chk4}').checked=false;
            input.checked=true;
        }
    </script> 
    
    
    <apex:form id="MyForm" >
    
     <apex:inputCheckbox id="chk1" selected="true" onClick="{SetCheckBoxes(this)}"/>
     <apex:inputCheckbox id="chk2" selected="false" onClick="{SetCheckBoxes(this)}"/>
     <apex:inputCheckbox id="chk3" selected="false" onClick="{SetCheckBoxes(this)}"/>
     <apex:inputCheckbox id="chk4" selected="false" onClick="{SetCheckBoxes(this)}"/>
               
     </apex:form>
     </apex:page>
Deepak Kumar SharmaDeepak Kumar Sharma
Hi Prazon,
Here is the solution for grouping all checkboxes as radiobutton:-

Visualforce page:-
<apex:page>
<head>
<script>  
function cbclick(e){
               e = e || event;
               var cb = e.target;
               cb.setAttribute('id', Math.floor(Math.random()*100));
               
               var cbxs = document.getElementsByTagName('input'), i=cbxs.length;
               console.log(cbxs);
               console.log('SELECTED_CB_ID' + cb.id);
               
               while(i--) {
                   if (cbxs[i].id == cb.id) {
                       cbxs[i].checked = true;
                   }
                   else
                       cbxs[i].checked = false;
               }
           }
</script>
</head>
<body>     
    <div class="slds-form-element__control ">
        <apex:inputCheckbox value="{!HTC.Default__c}"  styleClass="slds-checkbox" style="width: 60%;" id="default" onclick="cbclick(event)"/>
    </div>
</body>
</apex:page>

Thanks
Deepak :)