All TalkersCode Topics

Follow TalkersCode On Social Media

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

Set Checkbox Checked JavaScript

Last Updated : Mar 11, 2024

Set Checkbox Checked JavaScript

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

Let us know about the methods first.

.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.

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 Set Checkbox Checked JavaScript :-

Method 1 - using checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> set checkbox 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> set checkbox checked javascript </h3>
    </center>
    <input type="checkbox" name="click!" id="checkbox" value="click"> click!
    <script>
    //check
    var click = document.getElementById("checkbox") ;
    click.checked = true;
    //uncheck
    click.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> set checkbox 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> set checkbox 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 to set checkbox checked in JavaScript.

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

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪