HTML CSS JavaScript Demo: Checkboxes -- Version 1

Published: 15 January 2022
on channel: Thomas Blum

115

In this video we look at a web page with a set of checkboxes and one individual stand-alone checkbox. The checkboxes are grouped by giving them the same name attribute. The checkboxes are made to work in conjunction with a label by having the label's for attribute match the corresponding checkbox's id attribute. The CSS includes the code
input[type="checkbox"]:checked+label
which uses an attribute selection (type), a pseudo class (checked), and an adjacency operator (+). In this version we use the input's onclick attribute to connect the element's event to a function that handles the click. The checkbox click action clears out any previously displayed answer. An answer (the user's selection of movies) is displayed when the button is clicked. Then the code loops through the checkboxes, determining which are checked, pushing values onto an array, and then displaying the contents of that array.

On this page of the site you can watch the video online HTML CSS JavaScript Demo: Checkboxes -- Version 1 with a duration of hours minute second in good quality, which was uploaded by the user Thomas Blum 15 January 2022, share the link with friends and acquaintances, this video has already been watched 115 times on youtube and it was liked by 1 viewers. Enjoy your viewing!