Checkbox Is Checked JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
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>
- 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> 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>
- 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 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.
About Dikshita
