How to write Salesforce Lightning Components: First Interactive Send Data to-fro page to Apex

We will try to build a sample lightning component that can be embedded in lightning application and which talks with the Salesforce Apex class to get the data back and forth.

Requirement: We have to create a lightning page that has a set of checkboxes that a user is allowed to set to true or false. There is also a button that based on the checkboxes that are selected, it will perform some action through an apex classes. A sample scenario is below. What is the recommended way to accomplish this as i am trying to optimize and keep things simple?

Example scenario (assume 20 checkboxes exists)

1. checkbox1=true
2. checkbox2=true
3. checkbox3=true
4. checkbox10=true
5. all other checkboxes are false
6. On click of a button, the input should be passed to an apex class which will take the input and run some action based on what is selected as true

//Lightning component

   

   

   

       

           

               

                   
Checkbox Value

               

               
Checkbox Value

               

               
Checkbox Value

               

           

           

                                          

               

                   

                       

                                          label="Select?" value="{!v.data.checkbox1}"/>

                   

               

               

                   

                                      label="Select?" value="{!v.data.checkbox2}"/>

               

               

               

                   

                                      label="Select?" value="{!v.data.checkbox3}"/>

               

               

           

       

       

                   buttonTitle="Click to see what you put into the field" 

                   class="button" label="Click me" press="{!c.getData}"/>

   

//Lighnting component controller

({

    doInit : function(cmp, ev) {

        var action = cmp.get("c.getWrapperData");

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                console.log('Data from Controller**');

                console.log(response.getReturnValue());

               cmp.set('v.data', response.getReturnValue());

            }

            else if (state === "ERROR") {

                alert('Error : ' + JSON.stringify(response.getReturnValue()));

            }

        });

        $A.enqueueAction(action);

    },

    sendDataToController : function(cmp, ev) {

        var action = cmp.get("c.collectWrapperData");

         var data = cmp.get("v.data");

        console.log('data to sent');

        //see how data loooks like in console

        console.log(data);

        action.setParams({

            "data":JSON.stringify(data)

        });

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                console.log('Response from Controller**');

                console.log(response.getReturnValue());

               //cmp.set('v.data', response.getReturnValue());

            }

            else if (state === "ERROR") {

                alert('Error : ' + JSON.stringify(response.getReturnValue()));

            }

        });

        $A.enqueueAction(action);

    }

    

})