+ Start a Discussion
Renuka SharmaRenuka Sharma 

how to add multiple checkbox column in the Lightning compont

Hello all

i am trying to design a lightning component where i need 2 seperate checkbox column, how do i do that

i tried to hardcode from online, but still its not functioning properly
 
<aura:component controller="UpdateUsingCheckboxC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="ContactList" type="List" />
    
    <aura:handler name="init" value="{!this}" action="{!c.loadContacts}"/>
    <aura:handler event="force:refreshView" action="{!c.loadContacts}" />
    
    <div class="slds-grid slds-grid--align-end"> 
        <button class="slds-button slds-button--brand" onclick="{!c.updateFields}">Update Attendance</button>
    </div>
    
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th></th>
                <th></th>
                <th>
                    <span class="slds-truncate">Attendee</span>      
                </th>
                <th style="width:3.25rem;" class="slds-text-align--right">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <label class="slds-checkbox">
                                <!--header checkbox for select all-->
                                <ui:inputCheckbox aura:id="box3" change="{!c.selectAll}"/>
                                <span >Attended</span>
                                <span class="slds-form-element__label text"></span>
                            </label>
                        </div>
                    </div>
                </th>
                <th style="width:3.25rem;" class="slds-text-align--right">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <label class="slds-checkbox">
                                <!--header checkbox for select all-->
                                <ui:inputCheckbox aura:id="box4" change="{!c.selectAll}"/>
                                <span >Absentee</span>
                                <span class="slds-form-element__label text"></span>
                                
                            </label>
                        </div>
                       </div>
                        </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <td>
            
        </td>
        <tbody>
            <aura:iteration items="{!v.ContactList}" var="con">
                <tr>
                    <td></td>
                    <td></td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!con.Name}"><a>{!con.Name}</a></div>
                    </td>
                    <td scope="row" class="slds-text-align--right" style="width:3.25rem;">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox text="{!con.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                    </label>
                            </div>
                        </div>
                    </td>
                    <td>
                    <div class="slds-checkbox">
                	<input type="checkbox" name="options" id="checkbox-033" tabindex="0" aria-labelledby="check-button-label-033 column-group-header" value="checkbox-033" />
                    <label class="slds-checkbox__label" for="checkbox-033" id="check-button-label-033">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label slds-assistive-text">Select item 33</span>
                </label>
            </div>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </aura:iteration>
        </tbody>
        <tbody>
            <aura:iteration items="{!v.ContactList}" var="con">
                <tr>
                    <td></td>
                    <td></td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!con.Name}"><a>{!con.Name}</a></div>
                    </td>
                        <td scope="row" class="slds-text-align--right" style="width:3.25rem;">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox text="{!con.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </label>
                            </div>
                        </div>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </aura:iteration>
        </tbody>   
    </table>
</aura:component>

User-added image