+ Start a Discussion
@ M  Coder@ M Coder 

Lightning Requirement !!!!! Urgent.


User-added image
Hi All, 
on click of the checkbox by the user need the total to be displayed like below DYNAMICALLY. if i unselect the checkbox the sum needs to get reduced from the actual. for example: if i select two checkboxes above the sum of cost_price__c = 30 . if user select one more need to add to the total , if user unselect the checkbox it should reduce to the total.

I need to display the values below . Any help is highly appreciated
Total cost_price__c = 
Total market_price__c = 
 
Best Answer chosen by @ M Coder
Raj VakatiRaj Vakati
Hey , 

I created some dummy code for you which will meet your requirement . Mark it as solved 
 
<aura:component >
    <aura:attribute name="data" type="Object" />
    
    <aura:attribute name="totalPrice" type="Integer" default="0"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    {!v.totalPrice}
    
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col"><div class="slds-truncate" title="ID">Check</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                
                <th scope="col"><div class="slds-truncate" title="Type">Price</div></th>
            </tr>
        </thead>
        <tbody>
            
            <aura:iteration items="{!v.data}" var="obj">
                <tr>
                    <th scope="row"><div class="slds-truncate" >
                        <ui:inputCheckbox aura:id="checkbox"  value="{!obj.selected}" change="{!c.onCheck}"/>
                        
                        </div></th>
                    <td><div class="slds-truncate" >{!obj.Name}</div></td>
                    <td><div class="slds-truncate" >{!obj.Price}</div></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>
 
({
    doInit : function(component, event, helper) {
        
        component.set("v.data", [{
            "id": "1",
            "selected":false ,
            "Name": "Name 1",
            "Price": 10,
            "inventory": 1,
            "date_added": 1496757350
        },
                                 {
                                     "id": "2",
                                     "selected":false ,
                                     "Name": "Name 2",
                                     "Price": 40,
                                     "inventory": 1,
                                     "date_added": 1496757290
                                 },
                                 {
                                     "id": "3",
                                     "Name": "Name 3",
                                     "selected":false ,
                                     "Price": 10,
                                     "inventory": 1,
                                     "date_added": 1496757350
                                 },
                                 {
                                     "id": "4",
                                     "Name": "Name 4",
                                     "selected":false ,
                                     "Price": 40,
                                     "inventory": 1,
                                     "date_added": 1496757290
                                 }
                                 
                                ]);
        
    },
    onCheck: function(cmp, evt) {
        var checkCmp = cmp.find("checkbox");
        // resultCmp = cmp.find("checkResult");
        //cmp.set("v.totalPrice", checkCmp.get("v.value"));
        let totalPice = 0 ;
        var getData = cmp.get("v.data");
        for(var i=0; i<getData.length; i++){
            if(getData[i].selected){
              totalPice =totalPice+ getData[i].Price ; 
            }
        }
        
          cmp.set("v.totalPrice", totalPice);

        
    }
})

User-added image

All Answers

Raj VakatiRaj Vakati
Hey , 

I created some dummy code for you which will meet your requirement . Mark it as solved 
 
<aura:component >
    <aura:attribute name="data" type="Object" />
    
    <aura:attribute name="totalPrice" type="Integer" default="0"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    {!v.totalPrice}
    
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col"><div class="slds-truncate" title="ID">Check</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                
                <th scope="col"><div class="slds-truncate" title="Type">Price</div></th>
            </tr>
        </thead>
        <tbody>
            
            <aura:iteration items="{!v.data}" var="obj">
                <tr>
                    <th scope="row"><div class="slds-truncate" >
                        <ui:inputCheckbox aura:id="checkbox"  value="{!obj.selected}" change="{!c.onCheck}"/>
                        
                        </div></th>
                    <td><div class="slds-truncate" >{!obj.Name}</div></td>
                    <td><div class="slds-truncate" >{!obj.Price}</div></td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>
 
({
    doInit : function(component, event, helper) {
        
        component.set("v.data", [{
            "id": "1",
            "selected":false ,
            "Name": "Name 1",
            "Price": 10,
            "inventory": 1,
            "date_added": 1496757350
        },
                                 {
                                     "id": "2",
                                     "selected":false ,
                                     "Name": "Name 2",
                                     "Price": 40,
                                     "inventory": 1,
                                     "date_added": 1496757290
                                 },
                                 {
                                     "id": "3",
                                     "Name": "Name 3",
                                     "selected":false ,
                                     "Price": 10,
                                     "inventory": 1,
                                     "date_added": 1496757350
                                 },
                                 {
                                     "id": "4",
                                     "Name": "Name 4",
                                     "selected":false ,
                                     "Price": 40,
                                     "inventory": 1,
                                     "date_added": 1496757290
                                 }
                                 
                                ]);
        
    },
    onCheck: function(cmp, evt) {
        var checkCmp = cmp.find("checkbox");
        // resultCmp = cmp.find("checkResult");
        //cmp.set("v.totalPrice", checkCmp.get("v.value"));
        let totalPice = 0 ;
        var getData = cmp.get("v.data");
        for(var i=0; i<getData.length; i++){
            if(getData[i].selected){
              totalPice =totalPice+ getData[i].Price ; 
            }
        }
        
          cmp.set("v.totalPrice", totalPice);

        
    }
})

User-added image
This was selected as the best answer
@ M  Coder@ M Coder
Hi Raj V,

Its almost near , thanks for the proto type , but i have a lakhs of records , so i need to dynamically the set the data   inseted of this("id": "2", "selected":false , "Name": "Name 2", "Price": 40, "inventory": 1, "date_added": 1496757290) , and i need to take the unique Id for the checkbox selection .  
Raj VakatiRaj Vakati
Yes .. You need to Query form the apex class .. and set those values on doInit into Attributes    
Unique Id doesn't matter you could ignore it  
Mark it Solved!