Bootstrap 5 Checks and Radios Indeterminate
Last Updated :
28 Aug, 2023
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.
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" >
< 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.
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" >
< 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:
Share your thoughts in the comments
Please Login to comment...