Checkboxes are used for instances where a user may wish to select multiple options, such as in the instance of a “check all that apply” question, in forms. HTML Checkboxes Selected. A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a “yes” value.
- Typically shaped as square.
- Allow the user to select options with a single click.
- Options share a single name.
- Checkbox allow you to select more than one options per group
- HTML Code: HTML document by employing the dedicated HTML tag that wraps around JavaScript code. The tag can be placed in the section of your HTML, in the section, or after the close tag, depending on when you want the JavaScript to load.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form>
<fieldset>
<legend>
<bold>Checkbox</bold>
</legend>
<div class="form-group">
<label for="yesgraduated">
Are you graduated?
</label>
<input id="yesgraduated"
name="yesgraduated"
type="checkbox" value="yes"
onchange="graduatedFunction()" />
<br />
</div>
<div id="graduated"
class="form-group">
<label for="degreename">
Degree Name:
</label>
<input type="text"
class="form-control"
name="degreename"
id="degreename" />
<br />
</div>
<button type="button"
class="btn btn-primary"
value="Verify">
Submit
</button>
</fieldset>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
|
- JavaScript Code: Now, in the javaScript code we’re trying to give the option of including the degree in the form. The user need to tell if he/she is graduated or not. So when we click on this checkbox, a new input field opens up. So if someone clicks or doesn’t click it, the “graduatedFunction” function will either display the hidden part or display none.
javascript
<script>
function graduatedFunction() {
if (document.getElementById("yesgraduated")
.checked)
{
document.getElementById("graduated")
.style.display = "inline";
document.getElementById("degreename")
.setAttribute("required", true);
} else {
document.getElementById("degreename")
.removeAttribute("required");
document.getElementById("graduated")
.style.display = "none";
}
}
</script>
|
