In this article, Learn how to easily enable the checkbox check when click on text feature in HTML. This feature allows you to check a checkbox by clicking on the text next to it, making it easier for users to interact with your forms.
For example, you may have seen in some show and hide password field with checkbox that you click on show password text or some text beside checkbox then checkbox is checked. Even if you didn't click on checkbox. In this article we going to make that, click on text and checkbox is checked.
Checkbox check when click on text.
So, it simple to make it. We going to make it with the help of label tag. We bind checkbox and p tag (for text) with label tag. So now after binding, when user click on label tag its equal to click on checkbox and p tag.
Let's understand with example:
So here I've added label tag and nested the checkbox and p tag. As the checkbox and p tag is placed inside label tag. So now its bound with label tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label class="label">
<input type="checkbox">
<p>Show password</p>
</label>
</body>
</html>
CSS
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.label{
display: flex;
cursor: pointer;
}
Output :
You may like:
- How to get the value of multiple selected checkbox using JavaScript.
- How to design checkbox to look like circle using HTML & CSS.
- How to select and unselect all checkboxes using JavaScript.
- How to make a input field value same as value another input field on a checkbox selection using JavaScript.
- How to create an animated radio button using HTML, CSS & JavaScript.
- How to create an check mark animation using HTML, CSS & JavaScript.
That's how you can check the checkbox by clicking on text. If you have any question or suggestion you can write in comment section.
Share your thoughts.