Bootstrap 5 introduces the ability to create visually distinct checkboxes and radio buttons with an indeterminate state. This allows for representing intermediate or unknown selections, enhancing user interface clarity and flexibility.
- Indeterminate: The “indeterminate” class in checkboxes signifies a state where a selection is neither checked nor unchecked, providing visual distinction.
Here is the basic example of Bootstrap5 Checks and Radios Indeterminate.
Approach 1: In this approach, we are using disabled and checked checkboxes and JavaScript to set the indeterminate state on one checkbox. Here we demonstrate the basic use of Bootstrap’s form-check components.
Syntax:
checkbox4.indeterminate = true;Example: In this example, we are using the above-explained approach.
<!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">
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h1>Bootstrap 5 Checks Example </h1>
<h3>Select Frontend Technologies</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" disabled>
<label class="form-check-label" for="check1">
HTML
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check2" disabled checked>
<label class="form-check-label" for="check2">
CSS
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check3" checked>
<label class="form-check-label" for="check3">
Javascipt
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check4">
<label class="form-check-label" for="check4">
React
</label>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Set indeterminate state for the
// checkbox with ID "check5"
const checkbox4 = document.getElementById("check4");
checkbox4.indeterminate = true;
});
</script>
</body>
</html>
|
Output:
Approach 2: In this approach, we are creating Bootstrap 5 inline indeterminate checkboxes with three options: Bootstrap, Java, and Angular. JavaScript sets them to an indeterminate state, visually representing an intermediate or unknown state.
Syntax:
document.getElementById("Indeterminate").indeterminate = true;Example: In this example, we are using the above-explained approach.
<!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">
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h1>
Bootstrap 5 Indeterminate Checkboxes
</h1>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="Indeterminate">
<label class="form-check-label" for="Indeterminate">
Bootstrap
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="Indeterminate2">
<label class="form-check-label" for="Indeterminate2">
Java
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="Indeterminate3">
<label class="form-check-label" for="Indeterminate2">
Angular
</label>
</div>
</div>
<script>
let a = document.getElementById(
"Indeterminate").indeterminate = true;
let a1 = document.getElementById(
"Indeterminate2").indeterminate = true;
let a2 = document.getElementById(
"Indeterminate3").indeterminate = true;
</script>
</body>
</html>
|
Output: