Hey, everyone, let's continue talking about farms now.
We are going to talk about check boxes, so this is going to be very similar to radio buttons.
But since we can choose multiple items at the same time, I thought it would be interesting to show
you how to do loops with Jake Querrey.
So let's inspect this element.
As you can see, they have a name of interest, so they all have this name.
So here it is, name interest.
So this is how we are going to select them.
So let's go to Visual Studio called.
And we can just copy this.
But this time, the name is interest.
So every time there's a change, we are going to do something, so again, that's just to console that
log.
Just to make sure that this is working so changed.
Saving this refreshing the page.
Let's go to the council now, I'm just going to select.
An option, so as you can see, it is detecting the event.
So this is working.
I'm just going to unselected.
So again.
Pretty cool, so now we are safe to move forward.
Now I'm going to start a new variable called Selected.
Check boxes.
And I'm going to use the same selector we've used with the radio buttons.
So the same thing we had here.
But only the ones.
That have the exact attribute.
So now let's do console that log.
And let's see what we have inside it.
Now, let's select one.
So, as you can see, we have this thing here, which is not exactly an array, but it has a length,
it has the element.
So now let's select another one.
So here it is.
Now the length is two and we have two elements here.
So if we just.
One, to work with each of these elements separately, we know that we can use a loop, so why not using
a J.
Querrey loop?
So this is what I want to show you how to do.
So now we already know that inside this variable, we have an array now with Jake Wari, there's a loop
called each, which is similar.
To these for each loop, so each.
So, again, this is a method so open and close parentheses, semicolon at the end and inside it, we
need to pass some arguments.
So the first argument that we need to pass first is the array.
In which we will be iterating so in this case, is this selected checkboxes array and now the second
argument is going to be a function.
So what do we want to do at every iteration of this loop?
So for this, we are going to start a function.
So open and close parenthesis, open and close, curly braces, and now one cool thing that we can do
here, we can get the index and we can get the value.
So let's pass to arguments inside this function.
So one is going to be called index and one is going to be called value.
So just to test this out, let's do so dot log and let's just send the index to see what do we have
here.
So saving this, refreshing the page.
Let's select any checkbox here.
So this one.
So as you can see, we just have this one selected.
Now, if I unselected now, we don't have any, I'm going to select this one.
So now it's showing zero again, because if you think about it now, we only have one option again.
So we only have one array with one element.
So now I'm going to select another one.
So now we have index zero and index one.
Now I'm going to select the third one.
So now we have zero one and two.
So every time we do this, we are just getting the indexes of these options pretty cool.
Now let's do it differently.
Instead of using the index, let's just use the value.
So now let me select one elements of front end development, as you can see, it is getting the whole
element.
Now I'm going to select another one, and now our array has two elements.
And we are getting the values which are the HTML element, so here we have this one that has the value
of the F E and this one that is be eat.
Well, what if we just want to get the text?
So let's remember that we have these elements.
They are wrapped inside a span element, so we have this tax here, so how can we do this?
Well, let's go to Visual Studio Code.
So instead of just sending the value, which we know it's an age HTML element, let's use Jake Query
to select this element like this and let's try to use the parent method.
So let's do it like this and let's see what do we have in the console.
So saving this refreshing the page.
I'm going to select the first one.
So now, as you can see.
We were able to select that span.
So now let's move one step forward, let's try to get the age HTML content of that span.
So doing it like this step by step, let's try it again.
Getting this now, we just got the full e-mail of that span, and now if we just want that text, we
know that instead of using the e-mail method, we can use the text method.
So when we do this.
If we select this one now, we were able to just get the text, so now we got nothing.
Now back and development back and development and web design and so on.
So I know this part might seem a bit complicated at the moment, but we are going to practice this in
the next project.
We are going to focus on working with forms.
So I know that this is going to become very intuitive for you.
So that was all I wanted to say for now.
I'll see you in the next video.