INFORMATION & CODE

Check All Checkboxes on Button Click

What the Code Does

The code creates a simple “Check All Checkboxes” form containing six programming and web-development options: HTML, Java, JavaScript, Python, PHP, and SQL. The HTML defines the page structure, including a button and a group of checkboxes that all share the same name="list". The JavaScript file is loaded at the bottom of the page so that the checkAll() function can control the checkboxes when the button is clicked.

How the Code Works

The CSS controls the appearance of the page. It gives the page a light grey background with a grayscale effect, styles the headings, and creates a 400px-wide form with a pale background, blue border, rounded corners, and shadow. It also styles the Check All button and the text displayed alongside the checkboxes.

The JavaScript uses the checks variable to remember whether the checkboxes are currently selected. When the Check All button is clicked, the button passes the form's checkbox collection (this.form.list) to the checkAll() function. If checks is "false", the for loop goes through every checkbox and sets checked = true, selecting all of them. The function then changes the button text to “Uncheck All”.

When the button is clicked again, checks is "true", so the second part of the if statement runs. The loop sets every checkbox to checked = false, clearing all selections. The button text is then changed back to “Check All”. This creates a simple toggle between selecting and deselecting all options.

How to Use the Code

To use the code, place the HTML in your .html file, the CSS in styles.css, and the JavaScript in scripts.js in the same project folder. Open the HTML file in a web browser, select individual options if desired, and click Check All to select every checkbox. Click the button again to deselect them all.