Tag Archives: Checkbox

Toggle Checkbox in Lightning Component

Biswajeet   December 13, 2017   3 Comments on Toggle Checkbox in Lightning Component

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="toggleValue" type="String"/>
    <div class="slds-m-around--large">
        <div class="slds-form-element">
            <label class="slds-checkbox_toggle slds-grid">
                <span class="slds-form-element__label slds-m-bottom_none">Toggle Label </span>
                <ui:inputCheckbox aura:id="chkbox" class="slds-input" change="{!c.selectChange}"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on">Enabled</span>
                    <span class="slds-checkbox_off">Disabled</span>
                </span>
            </label>
            <p><b>The toggle is {!v.toggleValue} </b></p>
        </div> 
    </div> 
</aura:component>

Sample Lightning Component JS Controller:

({
    selectChange : function(cmp, event, helper) {
        var checkCmp = cmp.find("chkbox");
        cmp.set("v.toggleValue" ,  checkCmp.get("v.value"));
    }
})

Output:

Checkbox Options in Salesforce

Biswajeet   March 24, 2015   No Comments on Checkbox Options in Salesforce

Visualforce Page:

<apex:page controller="SampleController">
    <apex:form>
        <!--Country Checkboxes-->
        <apex:selectCheckboxes value="{!countries}">
            <!--Country List-->
            <apex:selectOptions value="{!CountryList}"/>
        </apex:selectCheckboxes><br/>
        <apex:commandButton value="Submit" action="{!getSelectedCountries}" rerender="out" status="status"/>
    </apex:form>
    <!--Selected Countries Output-->
    <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="Loading...">
            <apex:facet name="stop">
                <apex:outputPanel>
                    <p>Selected Countries:</p>
                    <apex:dataList value="{!countries}" var="c">{!c}</apex:dataList>
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputPanel>
</apex:page>

Apex Class:

public class SampleController {
    
    Public List<string> countries {get;set;}
    
    public SampleController(){
        countries = new List<string>();
    }
    
    public List<SelectOption> getCountryList() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('USA','USA'));
        options.add(new SelectOption('INDIA','India'));
        options.add(new SelectOption('CANADA','Canada'));
        options.add(new SelectOption('MEXICO','Mexico'));
        return options;
    }
    
    public pagereference getSelectedCountries(){
        system.debug('selectedcountries -' + countries);
        return null;
    }
}

Output:

To display checkbox options in vertical direction, use layout property layout="pageDirection" in selectCheckboxe component.

<apex:selectCheckboxes value="{!countries}" layout="pageDirection">
    <apex:selectOptions value="{!CountryList}"/>
</apex:selectCheckboxes>