 The students in this module, we will look at a practical example also, although the title is about check boxes, but we will look briefly at the radio buttons and for buttons also. With reference to a pizza company which is selling pizzas and would like to have the customers order the pizzas through the website and there are main three main types of pizzas with certain toppings. Of course that is not very interesting that is very kind of boring but as the company progresses and the company grows it offers more different types of pizzas and using those buttons using the check boxes and radio buttons I'll show you that how we add the versatility and taste also to the orders. So let's look at the module coverage. So working with select boxes the issues with the select boxes with reference to evaluating them then working with check boxes and working with radio buttons. So I believe the things would be clear then. Let's go ahead. So the heart of the example is twofold what you see on your left side on your screen this code I am talking about this code. This code. The click event handler and the flip function each input element that begins with the string special is selected with the jQuery selector. These are then looped through with the jQuery each function and the click event handler is added to each using the jQuery on function. The click event handler calls the flip function the resulting code looks like this. So we have this is the resulting code I'm talking about and this is the flip one I'm talking about and you can see the flip is over here also and this is the each I was talking about. The flip function looks like this. Okay. This is the flip function. I was referring to the function. This function examines the value of the pizza type variable that gets passed into the function and then using the conditional changes the value of the select box called topping. So we have these three types of pizzas one, two and three and this is the main topping. Okay. Main topping is the cheese over here and this is the cheese over here. So this is okay, but this is not very interesting. This is not in reality. Reality. There's a lot of variety. So now we are looking at more interesting stuff. The preceding example shows how to obtain information from a form and how to set information within a form. Although the form doesn't look like much and the pizza companies and making many pizzas right now it's growing because of the popularity of its pizzas. Future examples in this module expand on this form. Okay. So pizza type topping. Now there is a pizza type. Then there are three types of crust also one, two and three and there are many, many toppings, many toppings, okay, which were not covered in the previous one. So in the previous slide I showed the basic form that is not very interesting. The company was not making many pizzas. Okay. But when there is the main topping, okay, then of course that allows the flexibility, many toppings because that in the initial pizza ordering system, when the pizza order take a selected one of the three pizza types, the main topping select box change to reflect the main ingredients of the pizza. However, allowing more flexibility such as more pizza types would be nice. Okay. It would be nice to have more pizza types. And then of course, the previous example showed select boxes and you saw text boxes used earlier in this module too. Another type of box, a checkbox allows users to select multiple items. Pizza ordering scenario introduced serves as a good example for illustrating the checkbox. So now let's look at more interesting stuff. So what you see right now is this form over here. Okay. And selecting the various ingredients and clicking the pizza button displays the selected pizza toppings on the screen. So you can select multiple values over sausage toppings over here, mushrooms and onions also. So it is not limited to the three not limited to the three types. Okay. And of course, this is what you have selected. This is what you have selected. It helps you. So let's look at the code behind what is happening over here. The heart of the page is the function prepsa. This is I'm talking about over here, which is the heart of the code. Okay. Over here, I will show you more details, which starts by gathering the number of checkbox is contained within the form pizza form. These are selected using the name attribute topping check along with the check filter, all part of the jq as follows. Okay, this is I'm talking about and let's look at more detail. So what we have over here, each of the checked element is looped through and a new these are the elements. This element P is identified is created like the previous example, click event handler is added using the jq on. Okay, the on is used over here. And keep this example in mind because you can use it to combine with the functionality that automatically selects toppings when a user presses a button as in the select box example we saw earlier. So this adds more functionality. Now remember, now you can have more toppings. You can have more toppings. Okay, but one thing is missing, which is the crust crust is missing. So how do we go and handle the crust? Let's look at it. So you need to have this radio buttons over here. Radio buttons also create a group of options, but unlike checkboxes, only one radio button from the group can be selected at given time. Only one in the context of the pizza restaurant example, visitors might use the radio button to select the type of crust for the pizza, thin, deep dish or regular. Okay, so you can have one of them. Because the pizza can have only one kind of crust using radio buttons for this selection type makes sense, adding radio buttons to select a crust type results in a page that looks like this. This code that processes the radio buttons is similar to the code you saw in the that process the checkboxes. So I'm not showing this code. The main difference is the radio buttons all share the same name and logical grouping meaning that they are grouped together. And only one can be checked at a time. The code for processing the radio button is added to the pizza function. And it looks like this. So this is all for this module. So we have the pizza type, the pizza toppings and the type of crust to enjoy your pizza.