All TalkersCode Topics

Follow TalkersCode On Social Media

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

Checkbox Is Checked JavaScript

Last Updated : Aug 9, 2023

Checkbox Is Checked JavaScript

In this article we will show you the solution of checkbox is checked JavaScript , we will use two different methods to set the checkbox checked in JavaScript.

Let us know about the methods first.

Attr() property: this property is JavaScript used to set and return properties as ‘checked’. We can set it true to check the checkbox and also false to uncheck the checkbox.

Prop() property: The jQuery prop() method sets properties and is typically used to return DOM property values such as checked ‘Checked.

Step By Step Guide On Checkbox Is Checked JavaScript :-

Method 1 - Using Attr()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> checkbox is checked javascript </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> checkbox is checked javascript </h3>
    </center>
    <input type="checkbox" name="click!" id="checkbox" value="click"> click!
    <script>
        //check
        $("#checkbox").attr("checked", true) ;
        //uncheck
        $("#checkbox").attr("checked", false) ;
    </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. Creating a <input> tag with the type of checkbox, id of checkbox and value of click
  9. Create a <Script> tag to write JavaScript within it.
  10. Access the checkbox by Document.getElementById() by creating a variable click
  11. Set the checked property to true with the variable to set the check property
  12. To reset the checkbox set the checked property to false

Method 2 - using prop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> checkbox is checked javascript </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> checkbox is checked javascript </h3>
    </center>
    <input type="checkbox" name="click!" id="checkbox" value="click"> click!
    <script>
        //check
        $("#checkbox").prop("checked", true) ;
        //uncheck
        $("#checkbox").prop("checked", false) ;
    </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. Creating a <input> tag with the type of checkbox, id of click and value of click
  9. Create a <Script> tag to write JavaScript within it.
  10. Now using the jquery function prop() to set the property checked to true.
  11. And also to uncheck the checkbox set the property checked to false.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how checkbox is checked in JavaScript.

I hope this article on checkbox is checked JavaScript helps you and the steps and method mentioned above are easy to follow and implement.