Here's a simple JavaScript Checkbox Example with output.
Example 1: Check if Checkbox is Selected
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Example</title>
</head>
<body>
<h2>Checkbox Example</h2>
<input type="checkbox" id="chkAgree"> I Agree to the Terms & Conditions
<br><br>
<button onclick="checkStatus()">Submit</button>
<p id="result"></p>
<script>
function checkStatus() {
var checkbox = document.getElementById("chkAgree");
if (checkbox.checked) {
document.getElementById("result").innerHTML =
"✅ Checkbox is Checked.";
}
else {
document.getElementById("result").innerHTML =
"❌ Checkbox is Not Checked.";
}
}
</script>
</body>
</html>
Result
Case 1: Checkbox Checked
✅ Checkbox is Checked.
Case 2: Checkbox Not Checked
❌ Checkbox is Not Checked.
Example 2: Multiple Checkboxes
<!DOCTYPE html>
<html>
<head>
<title>Multiple Checkbox Example</title>
</head>
<body>
<h2>Select Your Skills</h2>
<input type="checkbox" id="html"> HTML <br>
<input type="checkbox" id="css"> CSS <br>
<input type="checkbox" id="js"> JavaScript <br><br>
<button onclick="showSkills()">Show Selected Skills</button>
<p id="output"></p>
<script>
function showSkills() {
var result = "";
if(document.getElementById("html").checked)
result += "HTML ";
if(document.getElementById("css").checked)
result += "CSS ";
if(document.getElementById("js").checked)
result += "JavaScript ";
if(result == "")
result = "No Skill Selected";
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
Result
If HTML and JavaScript are selected:
HTML JavaScript
If no checkbox is selected:
No Skill Selected
Example 3: Checkbox Validation
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Validation</title>
</head>
<body>
<input type="checkbox" id="terms">
I accept the Terms & Conditions
<br><br>
<button onclick="validateForm()">Register</button>
<script>
function validateForm() {
if(document.getElementById("terms").checked)
{
alert("Registration Successful");
}
else
{
alert("Please accept the Terms & Conditions.");
}
}
</script>
</body>
</html>
Result
| Checkbox Status | Output |
|---|---|
| ✔ Checked | Registration Successful |
| ✘ Not Checked | Please accept the Terms & Conditions. |
These examples are suitable for beginners learning JavaScript and demonstrate how to read a checkbox's checked property, work with multiple checkboxes, and validate user input.
No comments:
Post a Comment