A checkbox serves as a selection mechanism enabling users to make a binary decision (true or false) by either checking or unchecking it. Essentially, a checkbox is an icon commonly utilized in graphical user interface (GUI) forms and applications to collect one or more inputs from the user.
- When a checkbox is checked or marked, it signifies true; this indicates that the user has chosen the value.
- Conversely, when a checkbox is unchecked or unmarked, it represents false; this denotes that the user has not opted for the value.
It is important to note that a checkbox differs from both radio buttons and dropdown lists, as it permits users to select multiple options simultaneously. Conversely, radio buttons and dropdown lists restrict the selection to a single option from the available choices.
In this section, we will explore the process of retrieving the values of all checked checkboxes utilizing JavaScript.
Create checkbox syntax
To generate a checkbox in HTML, utilize the <input> tag and specify type="checkbox" within the tag, as demonstrated below -
<input type="checkbox" id="c1" value="on" name="cb1">Yes
While it is indeed possible to generate a checkbox by instantiating a checkbox object via JavaScript, this method tends to be somewhat intricate. We will delve into both techniques in detail later—
Examples
Create and get checkbox value
In this illustration, we will generate two checkboxes with the stipulation that the user is permitted to select only one of them. Subsequently, we will retrieve the value of the selected checkbox. Refer to the code provided below:
Copy Code
<html>
<body>
<h2 style="color:green">Create a checkbox and get its value</h2>
<h3> Are you a web developer? </h3>
Yes: <input type="checkbox" id="myCheck1" value="Yes, I'm a web developer">
No: <input type="checkbox" id="myCheck2" value="No, I'm not a web developer">
<br> <br>
<button onclick="checkCheckbox()">Submit</button> <br>
<h4 style="color:green" id="result"></h3>
<h4 style="color:red" id="error"></h3>
<script>
function checkCheckbox() {
var yes = document.getElementById("myCheck1");
var no = document.getElementById("myCheck2");
if (yes.checked == true && no.checked == true){
return document.getElementById("error").innerHTML = "Please mark only one checkbox either Yes or No";
}
else if (yes.checked == true){
var y = document.getElementById("myCheck1").value;
return document.getElementById("result").innerHTML = y;
}
else if (no.checked == true){
var n = document.getElementById("myCheck2").value;
return document.getElementById("result").innerHTML = n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
}
</script>
</body>
</html>
Output
When you check the Yes box and subsequently press the Submit button, a notification will appear as illustrated below:
If you press the Submit button without selecting any of the checkboxes, an error notification will appear.
In a similar manner, you are able to verify the results for additional conditions.
Get all checkbox value
In this section, you will learn how to retrieve all the values from checkboxes that have been selected by the user. Refer to the example provided below.
Copy Code
<html>
<body>
<h2 style="color:green">Create a checkbox and get its value</h2>
<h4> Select the programming language, you know </h4>
<tr>
<td> Java: <input type="checkbox" id="check1" class="pl" value="Java"> </td>
<td> PHP: <input type="checkbox" id="check2" class="pl" value="PHP"> </td>
</tr> <tr>
<td> Angular: <input type="checkbox" id="check3" class="pl" value="Angular"> </td>
<td> CSS: <input type="checkbox" id="check4" class="pl" value="CSS"> </td>
</tr> <tr>
<td> Python: <input type="checkbox" id="check5" class="pl" value="Python"> </td>
<td> Android: <input type="checkbox" id="check6" class="pl" value="Android"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 style="color:green" id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.pl');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
function getCheckboxValue() {
var l1 = document.getElementById("check1");
var l2 = document.getElementById("check2");
var l3 = document.getElementById("check3");
var l4 = document.getElementById("check4");
var l5 = document.getElementById("check5");
var l6 = document.getElementById("check6");
var res=" ";
if (l1.checked == true){
var pl1 = document.getElementById("check1").value;
res = pl1 + ",";
}
else if (l2.checked == true){
var pl2 = document.getElementById("check2").value;
res = res + pl2 + ",";
}
else if (l3.checked == true){
document.write(res);
var pl3 = document.getElementById("check3").value;
res = res + pl3 + ",";
}
else if (l4.checked == true){
var pl4 = document.getElementById("check4").value;
res = res + pl4 + ",";
}
else if (l5.checked == true){
var pl5 = document.getElementById("check5").value;
res = res + pl5 + ",";
}
else if (l6.checked == true){
var pl6 = document.getElementById("check6").value;
res = res + pl6;
} else {
return document.getElementById("result").innerHTML = "You have not selected anything";
}
return document.getElementById("result").innerHTML = "You have selected " + res + " languages";
}
</script>
</body>
</html>
Output
Upon running this code, a response similar to the screenshot below will be generated, displaying several programming languages from which you can select the ones you are familiar with.
In this step, when you select the Check all button, it will automatically check all the boxes associated with the programming languages. Following that, you should click on the Submit button to receive the response.
You have the option to choose languages individually by checking each respective box, and then you can click the Submit button to obtain the results.
Output: When you have not selected anything
Get all marked checkboxes value using querySelectorAll method
An additional technique exists to retrieve all selected values from the checkboxes chosen by the user. In this section, you will learn how to extract the values of all checkboxes using the querySelectorAll method that have been selected by the user. This approach will gather the values from the HTML form's checkboxes and present the outcome.
Get all checkbox value
Next, you will learn how to retrieve the values of all checkboxes that have been selected by the user. Refer to the example provided below.
Copy Code
<html>
<body>
<h2 style="color:green"> Get all marked checkboxes value </h2>
<h4> Select the programming language, you know </h4>
<tr>
<td> Java: <input type="checkbox" id="check1" name="pl" value="Java"> </td>
<td> PHP: <input type="checkbox" id="check2" name="pl" value="PHP"> </td>
</tr> <tr>
<td> Angular: <input type="checkbox" id="check3" name="pl" value="Angular"> </td>
<td> CSS: <input type="checkbox" id="check4" name="pl" value="CSS"> </td>
</tr> <tr>
<td> Python: <input type="checkbox" id="check5" name="pl" value="Python"> </td>
<td> Android: <input type="checkbox" id="check6" name="pl" value="Android"> </td> <br> <br>
<button id="btn">Submit</button> <br>
<h4 style="color:green" id="result"></h4>
<script>
document.getElementById('btn').onclick = function() {
var markedCheckbox = document.getElementsByName('pl');
for (var checkbox of markedCheckbox) {
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
</script>
</body>
</html>
Output
In this instance, it is evident that the values of all selected checkboxes have been returned.
Different JavaScript codes to get marked checkboxes value
JavaScript Code to Retrieve Values of All Checked Checkboxes
In this tutorial, we will explore how to obtain the values from all checkboxes that are currently checked using JavaScript. This functionality is useful in scenarios where you want to collect user selections from a form.
Here's a straightforward implementation that demonstrates how to achieve this:
// Function to get all checked checkbox values
function getCheckedCheckboxValues() {
// Select all checkboxes that are checked
const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
// Create an array to hold the values of checked checkboxes
const values = [];
// Iterate through the NodeList of checked checkboxes
checkedCheckboxes.forEach((checkbox) => {
// Push the value of each checked checkbox into the array
values.push(checkbox.value);
});
// Return the array containing the values
return values;
}
// Example usage
document.getElementById('submit-button').addEventListener('click', function() {
const checkedValues = getCheckedCheckboxValues();
console.log(checkedValues); // Output the checked values to the console
});
Explanation of the Code:
- Function Declaration: We define a function named
getCheckedCheckboxValuesthat will be responsible for gathering the values of all checkboxes that are checked. - Query Selection: The
document.querySelectorAllmethod is utilized to select all checkbox inputs that are checked. The selector'input[type="checkbox"]:checked'specifically filters for checkboxes that are currently selected. - Array Initialization: An empty array called
valuesis created to store the values of the checkboxes that have been checked. - Iteration: A
forEachloop is employed to iterate through the NodeList of checked checkboxes. For each checkbox, we access itsvalueproperty and add it to thevaluesarray. - Return Statement: Finally, the function returns the array containing the values of the checked checkboxes.
- Event Listener: In the example usage, an event listener is attached to a button with the ID
submit-button. When the button is clicked, the functiongetCheckedCheckboxValuesis called, and the resulting array of checked values is logged to the console.
This approach effectively allows you to gather all checked checkbox values effortlessly using JavaScript.
<script>
document.getElementById('btn').onclick = function() {
var markedCheckbox = document.getElementsByName('pl');
for (var checkbox of markedCheckbox) {
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
</script>
Additionally, you can utilize the following code snippet to retrieve the values of all selected checkboxes.
<script>
document.getElementById('btn').onclick = function() {
var markedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');
for (var checkbox of markedCheckbox) {
document.body.append(checkbox.value + ' ');
}
}
</script>
Checkbox components facilitate multiple selections. This implies that users have the ability to choose one or several options provided within the HTML form. Additionally, it is possible to select all checkboxes at once. This functionality was demonstrated in the preceding example.