+ Start a Discussion
Manjunath SC 5Manjunath SC 5 

how to uncheck the checkbox if second checkbox is clicked in aura components

Hello guys

i am working on aura components where when checkbox is checked, 2nd checkbox needs to be unchecked, i refered the below link

https://developer.salesforce.com/forums/?id=906F0000000DCw7IAG

Still i am not able to achive the functionality
 
Apex class

public class UpdateUsingCheckboxC {
    
    @AuraEnabled
    public static List <Contact> fetchContact(string key) {
        system.debug('classname'+key);
        Class__c cls = [select id,Courses__r.name from Class__c where id=:key];
        string classname = cls.Courses__r.name;
        system.debug('classname'+classname);
        return [SELECT Id, Name,Account.Name,FirstName,LastName,Check_for_Attendance__c,Check_for_Absentee__c FROM Contact where (Check_for_Attendance__c=false AND Check_for_Absentee__c=false) AND Account.Name =:classname];
    }
    
    @AuraEnabled
    public static void updateRecord(List <String> lstRecordId,string key) {
        List<Contact> lstUpdate = new List<Contact>();
        List<Attendancess__c> listAttendnce = new List<Attendancess__c>();
        Class__c cls = [select id,Courses__r.name from Class__c where id=:key];
        if(cls.Id !=null){
            for(Contact con : [SELECT Id,AccountId, Name,Phone,FirstName,LastName,Check_for_Attendance__c,Check_for_Absentee__c  FROM Contact WHERE Id IN : lstRecordId]){
                con.Check_for_Attendance__c = true;
                con.Check_for_Absentee__c = false;
                lstUpdate.add(con);
                
                Attendancess__c attandenc = new Attendancess__c();
                attandenc.Class__c = cls.Id;
                attandenc.Student_Attended__c = true;
                attandenc.Name = con.Name;
                attandenc.Created_Date_Time__c = system.now();
                listAttendnce.add(attandenc);
                system.debug('listAttendnce'+listAttendnce);
            }
            
            if(lstUpdate.size() > 0){
                update lstUpdate;
            }
            if(listAttendnce.size() > 0){
                insert listAttendnce;
            }
        }
    }
    
    @AuraEnabled
    public static void updateSecondRecord(List <String> secondRecordId,string key) {
        system.debug('key1'+key);
        system.debug('secondRecordId '+secondRecordId);
        List<Contact> lstUpdate = new List<Contact>();
        List<Attendancess__c> listAttendnce = new List<Attendancess__c>();
        if(key !=null){
        Class__c cls = [select id,Courses__r.name from Class__c where id=:key];
            for(Contact con : [SELECT Id,AccountId, Name,Phone,FirstName,LastName,Check_for_Attendance__c,Check_for_Absentee__c  FROM Contact WHERE Id IN : secondRecordId]){
                con.Check_for_Absentee__c = true;
                con.Check_for_Attendance__c = false;
                lstUpdate.add(con);
                
                Attendancess__c attandenc = new Attendancess__c();
                attandenc.Class__c = cls.Id;
                attandenc.Student_Attended__c = false;
                attandenc.Name = con.Name;
                attandenc.Created_Date_Time__c = system.now();
                listAttendnce.add(attandenc);
                system.debug('listAttendnce'+listAttendnce);
            }
            
            if(lstUpdate.size() > 0){
                update lstUpdate;
            }
            if(listAttendnce.size() > 0){
                insert listAttendnce;
            }
        }
    }
    
}
----------------------
Component

<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="boxPack" 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="" change="{!c.onCheck1}"/>
                                     <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                    </label>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox  text="{!con.Id}" aura:id="boxPack1" value="" change="{!c.onCheck2}"/>
                                     <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>

----------------------------------------------------
controller

({
    loadContacts: function(component, event, helper) {
        var rid = component.get("v.recordId");
        var action = component.get('c.fetchContact');
        action.setParams({key : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.ContactList', response.getReturnValue());
                component.find("box3").set("v.value", false);
            }
        });
        $A.enqueueAction(action);
    },

    selectAll: function(component, event, helper) {
        var selectedHeaderCheck = event.getSource().get("v.value");
        var getAllId = component.find("boxPack"); 
        if(! Array.isArray(getAllId)){
            if(selectedHeaderCheck == true){ 
                component.find("boxPack").set("v.value", true);    
            }else{
                component.find("boxPack").set("v.value", false);
            }
        }else{
            // check if select all (header checkbox) is true then true all checkboxes on table in a for loop  
            // and set the all selected checkbox length in selectedCount attribute.
            // if value is false then make all checkboxes false in else part with play for loop 
            // and select count as 0
            if (selectedHeaderCheck == true) {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", true);
                }
            } 
            else
            {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", false);
                }
                
            } 
        }  
    },
        
    updateFields: function(component, event, helper) {
        var updateId = [];
        var getAllId = component.find("boxPack");
        
        
        if(getAllId!=null){
            if(! Array.isArray(getAllId)){
                if (getAllId.get("v.value") == true) {
                    updateId.push(getAllId.get("v.text"));
                    
                }
            }else{
                
                for (var i = 0; i < getAllId.length; i++) {
                    if (getAllId[i].get("v.value") == true) {
                        updateId.push(getAllId[i].get("v.text"));
                        
                    }
                }
            } 
                var rid = component.get("v.recordId");
            var action = component.get('c.updateRecord');
            action.setParams({
                "lstRecordId": updateId,
                "key" : rid
            });
            action.setCallback(this, function(response) {
                
                var state = response.getState();
                if (state === "SUCCESS") {
                    console.log(state);
                    $A.get('e.force:refreshView').fire();
                }
            });
            $A.enqueueAction(action);
        }
        
        var updateId1 = [];
        var getAllIdUncheck = component.find("boxPack1");
        if(getAllIdUncheck!=null){
            if(! Array.isArray(getAllIdUncheck)){
                if (getAllIdUncheck.get("v.value") == true) {
                    updateId1.push(getAllIdUncheck.get("v.text"));
                    
                }
            }else{
                
                for (var i = 0; i < getAllIdUncheck.length; i++) {
                    if (getAllIdUncheck[i].get("v.value") == true) {
                        updateId1.push(getAllIdUncheck[i].get("v.text"));
                       
                    }
                }
            } 
            var rid1 = component.get("v.recordId");
            var action = component.get('c.updateSecondRecord');
            action.setParams({
                "secondRecordId": updateId1,
                "key" : rid1
            });
            action.setCallback(this, function(response) {
                
                var state = response.getState();
                if (state === "SUCCESS") {
                    console.log(state);
                    $A.get('e.force:refreshView').fire();
                }
            });
            $A.enqueueAction(action);
        }
    },
    
  
		onCheck1: function(cmp, evt) {
         var checkCmp1 =cmp.find("checkbox").get("v.value");
         var checkCmp2 =cmp.find("checkbox1").get("v.value");
         if(checkCmp1){
           var temp =cmp.find("checkbox1").set("v.value", true);
        }
         
	},
    onCheck2: function(cmp, evt) {
         var checkCmp1 =cmp.find("checkbox").get("v.value");
         var checkCmp2 =cmp.find("checkbox1").get("v.value");
         if(checkCmp1){
           var temp =cmp.find("checkbox").set("v.value", false);
        }
         
	}
})

User-added image