JavaScript Checkbox Is Checked
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript checkbox is checked, we are going to retrieve the values of the checkbox that is checked.
We are going to use the checked property to achieve that.
.checked property: The checkbox is selected if the checked property is set to true.
Additionally, the checkbox remains intact if the property is set to false. The input checkbox's checked property can also be set.
Step By Step Guide On JavaScript Checkbox Is Checked :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript checkbox is checked </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> javascript checkbox is checked </h3>
</center>
<h2>Select any language: </h2>
C : <input type="checkbox" name="C" id="C" value="C"> <br>
C++ : <input type="checkbox" name="Cpp" id="Cpp" value="Cpp"> <br>
Java : <input type="checkbox" name="Java" id="Java" value="Java"> <br>
javascript : <input type="checkbox" name="javascript" id="javascript" value="javascript"> <br>
Python : <input type="checkbox" name="Python" id="Python" value="Python"> <br>
<button onclick="myFunction()"> Click! </button>
<p id="output"></p>
<script>
function myFunction() {
var c = document.getElementById("C") ;
var cpp = document.getElementById("Cpp") ;
var java = document.getElementById("Java") ;
var javascript = document.getElementById("javascript") ;
var python = document.getElementById("Python") ;
var output = document.getElementById("output") ;
if(c.checked) {
output.innerHTML = c.value ;
}
else if(cpp.checked) {
output.innerHTML = cpp.value ;
}
else if(java.checked) {
output.innerHTML = java.value ;
}
else if(javascript.checked) {
output.innerHTML = javascript.value ;
}
else if(python.checked) {
output.innerHTML = python.value ;
}
else {
output.innerHTML = "please select atleast one option" ;
}
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Using <h2> to add a heading to the checkbox.
- Now create some <input> with the type of checkbox and have respective ids.
- <button> is created with onclick of a function.
- And also create an <p> of the id output to display the output
- Create a <Script> tag to write JavaScript within it.
- Access all the checkboxes by Document.getElementById() using var with their respective ids
- Now create some if-else statements. To check if the following checkbox is checked and display the value of the checkbox in the <p> tag.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to set checkbox checked in JavaScript.
I hope this article on JavaScript checkbox is checked helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
