To create a JavaScript script that checks all checkboxes on a webpage, you can use the following code:
// Get all checkboxes on the webpage
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Iterate over each checkbox and set its checked property to true
checkboxes.forEach((checkbox) => {
checkbox.checked = true;
});
This script uses the querySelectorAll method to select all checkboxes on the webpage. It then iterates over each checkbox using the forEach method and sets the checked property to true, which will check th e checkbox.
To use this script on a webpage, you can follow these steps:
- Create a new JavaScript file, for example, checkAllCheckboxes.js.
- Open the HTML file where you want to use this script.
- Include the JavaScript file by adding the following line in the <head> section of your HTML file:
<script src="checkAllCheckboxes.js"></script>
Save the file and open it in a web browser.
All checkboxes on the webpage should now be checked.
Make sure that the script file (checkAllCheckboxes.js) is in the same directory as your HTML file, or provide the correct path to the script file in the src attribute of the <script> tag.
Example of an HTML page with 5 checkboxes
<!DOCTYPE html>
<html>
<head>
<title>Check All Checkboxes @ Freshers.in Learning </title>
</head>
<body>
<h1>Check All Checkboxes Example @ Freshers.in Learning </h1>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label><br>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label><br>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Checkbox 3</label><br>
<input type="checkbox" id="checkbox4">
<label for="checkbox4">Checkbox 4</label><br>
<input type="checkbox" id="checkbox5">
<label for="checkbox5">Checkbox 5</label><br>
<button onclick="checkAllCheckboxes()">Check All</button>
<script>
function checkAllCheckboxes() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = true;
});
}
</script>
</body>
</html>
document.querySelectorAll is a method in JavaScript that allows you to select multiple elements in the HTML document using a CSS selector. It returns a NodeList containing all the elements that match the specified selector.
The querySelectorAll method is called on the document object, which represents the current HTML document. Here’s the syntax:
The selector parameter is a string that specifies the CSS selector for the elements you want to select. For example, you can use a class selector (.classname), an ID selector (#idname), an element selector (elementname), or a combination of selectors.
Note : This code will check all the checkbox , for unchecking you need to code for that as wellÂ
