Hey, everyone, in the previous video with just learn how to get the selected value of a radio button,
and now we are going to talk about check boxes.
Now, it's going to be a bit different because we can have multiple values at the same time.
Before we get started, if you have any questions about this part, I know this can be a bit confusing,
but just do it step by step, try to do it by yourself so you understand everything we are doing here.
And if you have any questions, you can always leave them in the Q&A section, and I will be glad to
help you out.
So continuing with the check boxes, this is going to be similar.
But like I said, the difference is that we can have multiple options selected.
So let's go to Visual Studio Code.
Let's just copy this, we have a similar structure, so this time the ID for the button we want is show.
Check.
And now let's create a variable called check.
And let's select all these elements, so going back to the HTML file.
Let me select one so we understand how it works.
So, as you can see, checkboxes, there are also individual input fuds.
So we have an input which has a type of checkbox and a name of interest.
So here we are listing some interests for a programmer so we can get them by type or by name.
Let's just use the gap element by name so we can do just like we did in the previous example, getting
them by names.
Then we are going to have an array with all these elements.
So going back to Visual Studio Code, we want to get these elements by name.
And the name of these fields are.
Interest.
All right, so just to make sure, as we always do, let's just do cancel that log to see what we have
inside this variable.
So this step is very important.
Always keep sending things to the console so you can see if there's something wrong.
So.
Saving this refreshing the page.
Let me go to the consul, so when I click this button, we can see that we were able to select all these
elements.
So this is one input.
If I put the cursor over it, we can see that now it's highlighting the element.
So we have the second and the third element.
So the rest we know what to do.
We just need to start a loop.
Let's remove this console dialogue and now what we are going to do is send them as list items.
So if we go back to the HTML.
Right here where I want you to show the options if I click here and go inside.
Let's get the idea of this element.
Let's just leave it here and now we are going to start forming the inner age HTML of this element,
so let's just copy this.
And the element we want to select has the idea of select the check.
Here it is.
And now we're going to start setting.
The inner e-mail of this element.
We could just send an empty string, but since we want to send a list, let's start by opening an unordered
list.
And now for all these options, we are going to send them inside an ally element.
So now let's just start our loop.
Right here, we don't have to worry about this variable conflicting with the other ones, because let's
remember that inside function.
So here we are inside a function, we have the local scope of the function.
So these loops are not going to be in conflict with the other one.
So we can use a without any problem.
I just have to remember to use the VA keyword, because if I don't, I'm going to be creating a variable
in the global scope.
My mistake.
Now, moving on.
What we want to do here is just.
Starting a loop that has to be smaller than the check.
Array, so A is less than check that length.
So now this is going to be very similar because these elements, when they are selected, they also
have that checked attribute.
So this time, if.
With the index of a has this attribute called checked, then we are going to do something and want we
are going to do is just.
Sending more fans to the HTML of this element.
So document that that element by select check and now the inner adjustment, we're just going to increment
it with plus equal and what we are going to do is just sending a list.
Item.
Let's close it right here and in the middle, we are just going to send a value that is selected.
So how do we do this?
Well.
We can just do check with the index of a dot.
Value.
All right, so pretty cool.
And then when we finish with this loop, we just want to close this unordered list.
So we just want to incremented and then close this list.
If we do this and go back to the page, let's refresh it.
Now, what happens if we don't have any option selected, let's show.
As you can see, we have nothing inside here, only the empty list, because we didn't find any element
with that attribute of checked.
But now if I select one so front end development and I click show, as you can see, we are creating
a list item.
With the value of that food, if I tried two options, we have the two options, let's try the three,
let's try to remove one.
So as you can see, this is pretty cool, we're able to get all the options that are selected in a check
box.
So if you are, let's say, running a survey, you can easily get all the options that have been selected
and just send it to a database.
So this is the start of it, of course, to do this, you are going to need a server side language,
but this is going to be the start getting the values you want from the input fuds.
So I hope this was not too complicated, like I said, if you need just watch this video and the previous
one again, just try to do it by yourself, do it step by step, try to understand what's going on.
If you still don't leave a question in the Q&A section, and I'll be glad to help you out.
So that was all for this lesson.
In the next one, we are going to do something cool because instead of sending these values to these
elements, after clicking the button, we are going to do this just by changing the elements.
So every time we change something in the form, we are going to update the options here.
And we are going to do this using the on change event.
So I'll see you in the next video.