All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Checkbox Is Checked

Last Updated : Aug 10, 2023

JavaScript Checkbox Is Checked

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>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. Using <h2> to add a heading to the checkbox.
  9. Now create some <input> with the type of checkbox and have respective ids.
  10. <button> is created with onclick of a function.
  11. And also create an <p> of the id output to display the output
  12. Create a <Script> tag to write JavaScript within it.
  13. Access all the checkboxes by Document.getElementById() using var with their respective ids
  14. 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.