<aura:application extends="force:slds">
    <c:AccountMainScreen/>
</aura:application>

<aura:component controller="AccountController">
    <aura:attribute name="allaccounts" type="List" description="All Products" />
    <aura:handler name="init" value="{!this}" action="{!c.fillAccount}"/>
    <div class="container">
        <div style="font-weight: bold;">Filter by Billing City</div><br/>
        <div>Bangalore</div><br/>
        <div>Mountain View</div><br/>
        <div>Singapore</div><br/>
        <div>
        <div style="background-color: #7f7e8a;height: 20px;"></div>
        <aura:iteration items="{!v.allaccounts}" var="account">
            <article class="slds-card">
            <div class="slds-card__header slds-grid">
             <header class="slds-media slds-media--center slds-has-flexi-truncate">
              <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">{!account.Name}</span>
          </a>
        </h2>
      </div>
    </header>
  </div>
  <div class="slds-card__body">{!account.BillingCity}</div>

</article>
        </aura:iteration>
        </div>

    </div>

</aura:component>

public class AccountController {

    @AuraEnabled
    public static List<Account> getAllAccounts()
    {

        List<Account> lstacc=[select Name,BillingCity from Account where BillingCity != null];
        return lstacc;

    }

}

({     fillAccount : function(component, event, helper) {
        helper.getAccountsfromSF(component, event)  } })

({
    getAccountsfromSF : function(component, event) {

        var action = component.get('c.getAllAccounts');
        action.setCallback(this,function(actionResult){
        component.set('v.allaccounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);

    }
})

<aura:iteration var="a" items="{!v.AccountList}" indexVar="indx">
        <ui:inputCheckbox aura:id="pick" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
    </aura:iteration>

<aura:iteration items="{!v.selectedvalues}" var="account">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media--center slds-has-flexi-truncate">
                <div class="slds-media__body slds-truncate">
                    <h2>
                        <a href="javascript:void(0);" class="slds-text-link--reset">
                            <span class="slds-text-heading--small">{!account.Name}</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body">{!account.BillingCity}</div>

    </article>
</aura:iteration>

({

initmethod : function(component,event,helper){
    var action = component.get("c.getAccountList");
    action.setCallback(this,function(a){
        var state=a.getState();
        if(state == "SUCCESS"){
            component.set("v.AccountList",a.getReturnValue());
        }

    });
    $A.enqueueAction(action);
},

selectoptionvalue :function(component,event,helper){
    var temp=component.get("v.selectedvalues");
    var selectedcity=component.get("v.SelectedCity");
    var accountdetails = component.get("v.AccountList");
     temp = [];//empty when while changing Picklist value
    if(event.getSource().get("v.value")){
        selectedcity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'value':event.getSource().get("v.value")});
    }
    if(event.getSource().get("v.value") == false){
        for(var j=0;j<selectedcity.length;j++){
            if(selectedcity[j].ids == event.getSource().get("v.name")){
                var index = j;
            }
        }
         selectedcity.splice(index,1);
     }
      component.set("v.SelectedCity",selectedcity);
    var accountdetails = component.get("v.AccountList");
    for(var i=0;i<accountdetails.length;i++){
        for(var k=0;k<selectedcity.length;k++){
            if(accountdetails[i].BillingCity == selectedcity[k].name){
                temp.push(accountdetails[i]);
            }
        }
    }

    component.set("v.selectedvalues",temp);
}

public class valuesget {
    @AuraEnabled
    public static List<Account> getAccountList(){
        return [Select Id,Name,BillingCity  From Account where BillingCity != null];
    }
}