1
00:00:08,400 --> 00:00:12,440
Hey, everyone, let's continue talking about farms now.

2
00:00:12,460 --> 00:00:18,580
We are going to talk about check boxes, so this is going to be very similar to radio buttons.

3
00:00:18,940 --> 00:00:26,020
But since we can choose multiple items at the same time, I thought it would be interesting to show

4
00:00:26,020 --> 00:00:28,900
you how to do loops with Jake Querrey.

5
00:00:29,320 --> 00:00:31,720
So let's inspect this element.

6
00:00:31,930 --> 00:00:37,670
As you can see, they have a name of interest, so they all have this name.

7
00:00:37,690 --> 00:00:40,140
So here it is, name interest.

8
00:00:40,360 --> 00:00:42,760
So this is how we are going to select them.

9
00:00:43,000 --> 00:00:44,890
So let's go to Visual Studio called.

10
00:00:52,200 --> 00:00:54,180
And we can just copy this.

11
00:00:57,060 --> 00:01:00,780
But this time, the name is interest.

12
00:01:02,870 --> 00:01:09,310
So every time there's a change, we are going to do something, so again, that's just to console that

13
00:01:09,320 --> 00:01:09,890
log.

14
00:01:11,380 --> 00:01:14,620
Just to make sure that this is working so changed.

15
00:01:16,030 --> 00:01:18,700
Saving this refreshing the page.

16
00:01:18,880 --> 00:01:22,030
Let's go to the council now, I'm just going to select.

17
00:01:23,460 --> 00:01:27,570
An option, so as you can see, it is detecting the event.

18
00:01:27,620 --> 00:01:28,710
So this is working.

19
00:01:28,860 --> 00:01:30,690
I'm just going to unselected.

20
00:01:30,690 --> 00:01:31,590
So again.

21
00:01:32,950 --> 00:01:35,730
Pretty cool, so now we are safe to move forward.

22
00:01:39,140 --> 00:01:42,860
Now I'm going to start a new variable called Selected.

23
00:01:47,520 --> 00:01:49,050
Check boxes.

24
00:01:50,090 --> 00:01:56,660
And I'm going to use the same selector we've used with the radio buttons.

25
00:02:04,990 --> 00:02:06,730
So the same thing we had here.

26
00:02:09,670 --> 00:02:11,920
But only the ones.

27
00:02:12,880 --> 00:02:16,600
That have the exact attribute.

28
00:02:17,790 --> 00:02:20,250
So now let's do console that log.

29
00:02:26,470 --> 00:02:28,680
And let's see what we have inside it.

30
00:02:34,630 --> 00:02:35,950
Now, let's select one.

31
00:02:36,700 --> 00:02:43,200
So, as you can see, we have this thing here, which is not exactly an array, but it has a length,

32
00:02:43,210 --> 00:02:44,890
it has the element.

33
00:02:45,130 --> 00:02:47,140
So now let's select another one.

34
00:02:47,410 --> 00:02:48,400
So here it is.

35
00:02:48,400 --> 00:02:51,990
Now the length is two and we have two elements here.

36
00:02:52,330 --> 00:02:54,130
So if we just.

37
00:02:55,140 --> 00:03:02,850
One, to work with each of these elements separately, we know that we can use a loop, so why not using

38
00:03:02,850 --> 00:03:04,430
a J.

39
00:03:04,440 --> 00:03:05,640
Querrey loop?

40
00:03:05,790 --> 00:03:08,070
So this is what I want to show you how to do.

41
00:03:09,910 --> 00:03:16,480
So now we already know that inside this variable, we have an array now with Jake Wari, there's a loop

42
00:03:16,480 --> 00:03:18,970
called each, which is similar.

43
00:03:19,960 --> 00:03:23,000
To these for each loop, so each.

44
00:03:23,530 --> 00:03:32,740
So, again, this is a method so open and close parentheses, semicolon at the end and inside it, we

45
00:03:32,740 --> 00:03:34,900
need to pass some arguments.

46
00:03:35,080 --> 00:03:40,660
So the first argument that we need to pass first is the array.

47
00:03:45,700 --> 00:03:55,780
In which we will be iterating so in this case, is this selected checkboxes array and now the second

48
00:03:55,780 --> 00:03:58,780
argument is going to be a function.

49
00:03:59,050 --> 00:04:04,280
So what do we want to do at every iteration of this loop?

50
00:04:04,660 --> 00:04:08,080
So for this, we are going to start a function.

51
00:04:10,420 --> 00:04:17,800
So open and close parenthesis, open and close, curly braces, and now one cool thing that we can do

52
00:04:17,800 --> 00:04:22,080
here, we can get the index and we can get the value.

53
00:04:22,090 --> 00:04:25,680
So let's pass to arguments inside this function.

54
00:04:25,690 --> 00:04:31,020
So one is going to be called index and one is going to be called value.

55
00:04:31,510 --> 00:04:41,770
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

56
00:04:41,770 --> 00:04:42,080
here.

57
00:04:42,460 --> 00:04:46,450
So saving this, refreshing the page.

58
00:04:46,750 --> 00:04:50,100
Let's select any checkbox here.

59
00:04:50,110 --> 00:04:50,980
So this one.

60
00:04:51,130 --> 00:04:55,090
So as you can see, we just have this one selected.

61
00:04:55,390 --> 00:05:01,090
Now, if I unselected now, we don't have any, I'm going to select this one.

62
00:05:01,120 --> 00:05:07,870
So now it's showing zero again, because if you think about it now, we only have one option again.

63
00:05:07,870 --> 00:05:11,290
So we only have one array with one element.

64
00:05:11,320 --> 00:05:13,780
So now I'm going to select another one.

65
00:05:13,990 --> 00:05:18,050
So now we have index zero and index one.

66
00:05:18,070 --> 00:05:20,210
Now I'm going to select the third one.

67
00:05:20,440 --> 00:05:23,490
So now we have zero one and two.

68
00:05:23,680 --> 00:05:31,330
So every time we do this, we are just getting the indexes of these options pretty cool.

69
00:05:31,360 --> 00:05:33,190
Now let's do it differently.

70
00:05:34,500 --> 00:05:39,450
Instead of using the index, let's just use the value.

71
00:05:47,120 --> 00:05:55,010
So now let me select one elements of front end development, as you can see, it is getting the whole

72
00:05:55,220 --> 00:05:55,890
element.

73
00:05:56,390 --> 00:06:01,970
Now I'm going to select another one, and now our array has two elements.

74
00:06:03,080 --> 00:06:10,970
And we are getting the values which are the HTML element, so here we have this one that has the value

75
00:06:10,970 --> 00:06:15,260
of the F E and this one that is be eat.

76
00:06:15,440 --> 00:06:19,490
Well, what if we just want to get the text?

77
00:06:19,610 --> 00:06:23,450
So let's remember that we have these elements.

78
00:06:24,440 --> 00:06:32,040
They are wrapped inside a span element, so we have this tax here, so how can we do this?

79
00:06:32,060 --> 00:06:35,210
Well, let's go to Visual Studio Code.

80
00:06:35,480 --> 00:06:43,550
So instead of just sending the value, which we know it's an age HTML element, let's use Jake Query

81
00:06:44,300 --> 00:06:52,730
to select this element like this and let's try to use the parent method.

82
00:06:53,240 --> 00:06:57,800
So let's do it like this and let's see what do we have in the console.

83
00:06:58,550 --> 00:07:01,610
So saving this refreshing the page.

84
00:07:04,440 --> 00:07:07,170
I'm going to select the first one.

85
00:07:08,250 --> 00:07:09,810
So now, as you can see.

86
00:07:11,100 --> 00:07:14,770
We were able to select that span.

87
00:07:15,030 --> 00:07:24,140
So now let's move one step forward, let's try to get the age HTML content of that span.

88
00:07:24,640 --> 00:07:29,580
So doing it like this step by step, let's try it again.

89
00:07:36,320 --> 00:07:44,720
Getting this now, we just got the full e-mail of that span, and now if we just want that text, we

90
00:07:44,720 --> 00:07:50,630
know that instead of using the e-mail method, we can use the text method.

91
00:07:53,240 --> 00:07:54,860
So when we do this.

92
00:07:58,330 --> 00:08:05,200
If we select this one now, we were able to just get the text, so now we got nothing.

93
00:08:05,200 --> 00:08:12,490
Now back and development back and development and web design and so on.

94
00:08:12,640 --> 00:08:20,620
So I know this part might seem a bit complicated at the moment, but we are going to practice this in

95
00:08:20,620 --> 00:08:22,090
the next project.

96
00:08:22,390 --> 00:08:25,590
We are going to focus on working with forms.

97
00:08:25,840 --> 00:08:29,560
So I know that this is going to become very intuitive for you.

98
00:08:29,980 --> 00:08:32,050
So that was all I wanted to say for now.

99
00:08:32,170 --> 00:08:33,880
I'll see you in the next video.