1 00:00:09,100 --> 00:00:15,450 Hey, everyone, in the previous video with just learn how to get the selected value of a radio button, 2 00:00:15,580 --> 00:00:18,500 and now we are going to talk about check boxes. 3 00:00:18,530 --> 00:00:23,980 Now, it's going to be a bit different because we can have multiple values at the same time. 4 00:00:25,180 --> 00:00:32,290 Before we get started, if you have any questions about this part, I know this can be a bit confusing, 5 00:00:32,530 --> 00:00:40,210 but just do it step by step, try to do it by yourself so you understand everything we are doing here. 6 00:00:40,390 --> 00:00:47,170 And if you have any questions, you can always leave them in the Q&A section, and I will be glad to 7 00:00:47,170 --> 00:00:47,960 help you out. 8 00:00:48,340 --> 00:00:53,080 So continuing with the check boxes, this is going to be similar. 9 00:00:53,320 --> 00:00:59,500 But like I said, the difference is that we can have multiple options selected. 10 00:01:00,530 --> 00:01:02,870 So let's go to Visual Studio Code. 11 00:01:05,880 --> 00:01:16,080 Let's just copy this, we have a similar structure, so this time the ID for the button we want is show. 12 00:01:17,080 --> 00:01:17,620 Check. 13 00:01:22,140 --> 00:01:25,230 And now let's create a variable called check. 14 00:01:27,540 --> 00:01:33,600 And let's select all these elements, so going back to the HTML file. 15 00:01:34,510 --> 00:01:37,930 Let me select one so we understand how it works. 16 00:01:38,080 --> 00:01:43,600 So, as you can see, checkboxes, there are also individual input fuds. 17 00:01:43,930 --> 00:01:50,270 So we have an input which has a type of checkbox and a name of interest. 18 00:01:50,410 --> 00:01:57,860 So here we are listing some interests for a programmer so we can get them by type or by name. 19 00:01:57,880 --> 00:02:05,350 Let's just use the gap element by name so we can do just like we did in the previous example, getting 20 00:02:05,350 --> 00:02:06,470 them by names. 21 00:02:06,490 --> 00:02:09,970 Then we are going to have an array with all these elements. 22 00:02:10,300 --> 00:02:15,220 So going back to Visual Studio Code, we want to get these elements by name. 23 00:02:15,370 --> 00:02:17,410 And the name of these fields are. 24 00:02:19,170 --> 00:02:20,040 Interest. 25 00:02:23,510 --> 00:02:30,470 All right, so just to make sure, as we always do, let's just do cancel that log to see what we have 26 00:02:30,470 --> 00:02:31,700 inside this variable. 27 00:02:31,880 --> 00:02:34,000 So this step is very important. 28 00:02:34,310 --> 00:02:40,090 Always keep sending things to the console so you can see if there's something wrong. 29 00:02:40,880 --> 00:02:41,660 So. 30 00:02:42,910 --> 00:02:45,790 Saving this refreshing the page. 31 00:02:47,400 --> 00:02:54,840 Let me go to the consul, so when I click this button, we can see that we were able to select all these 32 00:02:54,840 --> 00:02:55,520 elements. 33 00:02:56,040 --> 00:02:57,720 So this is one input. 34 00:02:58,320 --> 00:03:03,330 If I put the cursor over it, we can see that now it's highlighting the element. 35 00:03:03,640 --> 00:03:06,150 So we have the second and the third element. 36 00:03:06,160 --> 00:03:07,800 So the rest we know what to do. 37 00:03:08,430 --> 00:03:10,200 We just need to start a loop. 38 00:03:12,620 --> 00:03:21,170 Let's remove this console dialogue and now what we are going to do is send them as list items. 39 00:03:21,320 --> 00:03:23,990 So if we go back to the HTML. 40 00:03:25,700 --> 00:03:31,220 Right here where I want you to show the options if I click here and go inside. 41 00:03:34,660 --> 00:03:37,120 Let's get the idea of this element. 42 00:03:41,760 --> 00:03:49,280 Let's just leave it here and now we are going to start forming the inner age HTML of this element, 43 00:03:49,650 --> 00:03:52,170 so let's just copy this. 44 00:03:54,290 --> 00:04:00,020 And the element we want to select has the idea of select the check. 45 00:04:02,020 --> 00:04:02,770 Here it is. 46 00:04:05,660 --> 00:04:08,360 And now we're going to start setting. 47 00:04:09,810 --> 00:04:12,450 The inner e-mail of this element. 48 00:04:14,190 --> 00:04:21,600 We could just send an empty string, but since we want to send a list, let's start by opening an unordered 49 00:04:21,600 --> 00:04:22,170 list. 50 00:04:22,680 --> 00:04:30,520 And now for all these options, we are going to send them inside an ally element. 51 00:04:31,230 --> 00:04:33,510 So now let's just start our loop. 52 00:04:38,340 --> 00:04:46,440 Right here, we don't have to worry about this variable conflicting with the other ones, because let's 53 00:04:46,440 --> 00:04:48,420 remember that inside function. 54 00:04:48,440 --> 00:04:53,450 So here we are inside a function, we have the local scope of the function. 55 00:04:54,270 --> 00:04:58,560 So these loops are not going to be in conflict with the other one. 56 00:04:58,580 --> 00:05:01,110 So we can use a without any problem. 57 00:05:02,660 --> 00:05:10,100 I just have to remember to use the VA keyword, because if I don't, I'm going to be creating a variable 58 00:05:10,100 --> 00:05:11,500 in the global scope. 59 00:05:12,110 --> 00:05:13,020 My mistake. 60 00:05:13,880 --> 00:05:14,930 Now, moving on. 61 00:05:17,210 --> 00:05:19,760 What we want to do here is just. 62 00:05:20,770 --> 00:05:25,840 Starting a loop that has to be smaller than the check. 63 00:05:26,860 --> 00:05:31,150 Array, so A is less than check that length. 64 00:05:31,450 --> 00:05:36,850 So now this is going to be very similar because these elements, when they are selected, they also 65 00:05:36,850 --> 00:05:39,560 have that checked attribute. 66 00:05:40,300 --> 00:05:42,070 So this time, if. 67 00:05:49,260 --> 00:05:57,870 With the index of a has this attribute called checked, then we are going to do something and want we 68 00:05:57,870 --> 00:05:59,640 are going to do is just. 69 00:06:01,150 --> 00:06:05,050 Sending more fans to the HTML of this element. 70 00:06:08,190 --> 00:06:15,900 So document that that element by select check and now the inner adjustment, we're just going to increment 71 00:06:15,900 --> 00:06:23,580 it with plus equal and what we are going to do is just sending a list. 72 00:06:25,690 --> 00:06:26,320 Item. 73 00:06:30,320 --> 00:06:37,130 Let's close it right here and in the middle, we are just going to send a value that is selected. 74 00:06:37,310 --> 00:06:38,660 So how do we do this? 75 00:06:38,880 --> 00:06:39,320 Well. 76 00:06:42,030 --> 00:06:47,010 We can just do check with the index of a dot. 77 00:06:49,530 --> 00:06:50,130 Value. 78 00:06:53,200 --> 00:06:54,590 All right, so pretty cool. 79 00:06:54,610 --> 00:07:00,790 And then when we finish with this loop, we just want to close this unordered list. 80 00:07:02,130 --> 00:07:09,240 So we just want to incremented and then close this list. 81 00:07:10,400 --> 00:07:15,020 If we do this and go back to the page, let's refresh it. 82 00:07:18,160 --> 00:07:23,230 Now, what happens if we don't have any option selected, let's show. 83 00:07:23,890 --> 00:07:31,630 As you can see, we have nothing inside here, only the empty list, because we didn't find any element 84 00:07:31,930 --> 00:07:34,090 with that attribute of checked. 85 00:07:34,330 --> 00:07:41,050 But now if I select one so front end development and I click show, as you can see, we are creating 86 00:07:41,230 --> 00:07:42,670 a list item. 87 00:07:44,120 --> 00:07:52,060 With the value of that food, if I tried two options, we have the two options, let's try the three, 88 00:07:52,490 --> 00:07:54,050 let's try to remove one. 89 00:07:56,520 --> 00:08:03,030 So as you can see, this is pretty cool, we're able to get all the options that are selected in a check 90 00:08:03,030 --> 00:08:03,410 box. 91 00:08:03,660 --> 00:08:10,890 So if you are, let's say, running a survey, you can easily get all the options that have been selected 92 00:08:11,190 --> 00:08:13,170 and just send it to a database. 93 00:08:14,620 --> 00:08:20,590 So this is the start of it, of course, to do this, you are going to need a server side language, 94 00:08:20,830 --> 00:08:27,850 but this is going to be the start getting the values you want from the input fuds. 95 00:08:29,060 --> 00:08:35,810 So I hope this was not too complicated, like I said, if you need just watch this video and the previous 96 00:08:35,810 --> 00:08:42,290 one again, just try to do it by yourself, do it step by step, try to understand what's going on. 97 00:08:42,440 --> 00:08:48,390 If you still don't leave a question in the Q&A section, and I'll be glad to help you out. 98 00:08:48,800 --> 00:08:50,480 So that was all for this lesson. 99 00:08:50,570 --> 00:08:57,680 In the next one, we are going to do something cool because instead of sending these values to these 100 00:08:57,920 --> 00:09:04,940 elements, after clicking the button, we are going to do this just by changing the elements. 101 00:09:04,940 --> 00:09:11,000 So every time we change something in the form, we are going to update the options here. 102 00:09:11,180 --> 00:09:15,110 And we are going to do this using the on change event. 103 00:09:15,650 --> 00:09:17,330 So I'll see you in the next video.