Bootstrap 4 Stacked Checkbox with Indeterminate State

Enhance your forms with stacked checkboxes featuring an indeterminate state in Bootstrap 4. Learn how to create versatile checkbox layouts for improved user interaction and form functionality.

Explore how to integrate a Bootstrap 4 stacked checkbox with an indeterminate state into your web projects. This UI component is ideal for scenarios where you need to manage multiple checkboxes in a hierarchical structure. Follow these straightforward steps to seamlessly incorporate this feature into your own project:

Copy the Code Snippet:

  • Begin by copying the provided HTML and JavaScript code snippet for the Bootstrap 4 stacked checkbox with an indeterminate state.

Link Bootstrap CSS:

  • Ensure Bootstrap CSS is linked in the <head> section of your HTML file. If you haven't integrated Bootstrap yet, include the following link:
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Customize and Make It Yours:

  • Modify the code snippet to suit your specific design and functionality requirements. Adjust colors, sizes, and behaviors to align with your project's UI/UX standards.

Test and Implement:

  • Test the functionality of the stacked checkbox to verify it behaves as expected. Ensure it meets accessibility guidelines and provides a user-friendly experience.

By following these steps, you can effectively integrate and customize the Bootstrap 4 stacked checkbox with an indeterminate state according to your project's needs. Enhance user interaction and streamline checkbox management effortlessly.

Code Explanation

HTML Code

Container (<div class="container mt-5">):

  • This is a Bootstrap container with an additional mt-5 class which adds a top margin of 5 units (adjustable spacing) to create space between the content above it.

Form Check (<div class="form-check">):

  • Bootstrap's form-check class is used to style checkboxes and radio buttons in forms.

Checkbox Input (<input class="form-check-input" type="checkbox" value="" id="checkbox1" checked>):

  • This <input> element is styled as a checkbox (form-check-input class).
  • type="checkbox" specifies it's a checkbox input.
  • value="" is empty here, as it's not used directly in this example.
  • id="checkbox1" is a unique identifier for this checkbox.
  • checked attribute makes this checkbox initially checked.

Label (<label class="form-check-label" for="checkbox1">Checked</label>):

  • This <label> element is associated with the checkbox via the for attribute (for="checkbox1").
  • It displays the text "Checked" next to the checkbox.
  • Clicking on the label toggles the checkbox due to the association with its for attribute.

Similar Structure for Other Checkboxes:

  • The structure for the second and third checkboxes (checkbox2 and checkbox3) is identical:
    • Each has a <div> with form-check class.
    • An <input> element with form-check-input class, unique id, and either checked attribute or no checked attribute.
    • A <label> associated with the <input> using the for attribute, displaying different text ("Indeterminate" and "Unchecked" respectively).

JavaScript Code

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

  • This line selects all the <input> elements with the type attribute set to "checkbox" on the current web page.
  • The result is stored in the checkboxes variable.

checkboxes[1].indeterminate = true;

  • This line sets the indeterminate property of the second checkbox (index 1 in the checkboxes NodeList) to true.
  • The indeterminate state is used when a checkbox is neither checked nor unchecked. It typically appears as a grayed-out or partially filled checkbox.