Set Checkbox Checked JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
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>
- 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
- Creating a <input> tag with the type of checkbox, id of checkbox and value of click
- Create a <Script> tag to write JavaScript within it.
- Access the checkbox by Document.getElementById() by creating a variable click
- Set the checked property to true with the variable to set the check property
- 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>
- 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
- Creating a <input> tag with the type of checkbox, id of click and value of click
- Create a <Script> tag to write JavaScript within it.
- Now using the jquery function prop() to set the property checked to true.
- 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.
About Dikshita
