Semantic-UI Checkbox Indeterminate State

Last Updated : 28 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for user interface design. One of them is the Checkboxes component. Checkboxes are used to show different options to users to choose from. Users can select among them as per their choice. Depending on the requirements of the usage of checkboxes there are different states of checkboxes. One of them is the indeterminate state.

Semantic UI Checkbox Indeterminate State: If you want to represent the partially checked state (a state where some options are checked) then this state comes in handy. It cannot be implemented in HTML. It can only be set using JavaScript. It represents a state where it is neither fully checked nor unchecked. It is useful in nested checkboxes. The top checkbox is checked if all the below ones are checked. It is unchecked if none of the below options is checked. If some of the below options are checked then the top head checkbox is in an indeterminate state.

Semantic UI Checkbox Indeterminate State Class:

indeterminate: This class is used to specify that the state of the checkbox is indeterminate.

Syntax:

<div class="ui checkbox">
    <input type="checkbox">
    <label>...</label>
</div>

Example: This example demonstrates the checkbox indeterminate state using the script attached in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
          
<p><b>Semantic UI Checkbox Indeterminate State</b></p> 
  
        <hr> 
        <br /> 
        <strong>Indeterminate Checkbox:</strong> 
        <br /> 
        <div class="ui relaxed list"> 
            <div class="item"> 
                <div class="ui master checkbox"> 
                    <input type="checkbox" name="fruits"> 
                    <label>Head Checkbox</label> 
                </div> 
                <div class="list"> 
                    <div class="item"> 
                        <div class="ui child checkbox"> 
                            <input type="checkbox"
                                   name="apple"> 
                            <label>Child 1</label> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <div class="ui child checkbox"> 
                            <input type="checkbox"
                                   name="orange"> 
                            <label>Child 2</label> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <div class="ui child checkbox"> 
                            <input type="checkbox" 
                                   name="pear"> 
                            <label>Child 3</label> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <script> 
            $('.list .master.checkbox') 
                .checkbox({ 
  
                      // Tick all children if 
                    // the head checkbox is ticked 
                    onChecked: function () { 
                        var $child =$(this) 
                            .closest('.checkbox') 
                            .siblings('.list') 
                            .find('.checkbox'); 
                        $child.checkbox('check'); 
                    }, 
                
                    // Untick all children if 
                    // the head checkbox is unticked 
                    onUnchecked: function () { 
                        var $child = $(this) 
                            .closest('.checkbox') 
                            .siblings('.list') 
                            .find('.checkbox'); 
                        $child.checkbox('uncheck'); 
                    } 
                }); 
  
            $('.list .child.checkbox') 
                .checkbox({ 
                    fireOnInit: true, 
                    // Change the head checkbox state 
                    // on each child's onChange call 
                    onChange: function () { 
                        var list = $(this).closest('.list'), 
                        parentCheckbox = list 
                            .closest('.item') 
                            .children('.checkbox'), 
                        checkbox = list.find('.checkbox'), 
                        allticked = true, 
                        allunticked = true; 
  
                        checkbox.each(function () { 
                            if ($(this).checkbox('is checked')) { 
                                allunticked = false; 
                            } 
                            else { 
                                allticked = false; 
                            } 
                        }); 
                
                        // Setting the head checkbox properties  
                        if (allticked) { 
                            parentCheckbox 
                              .checkbox('set checked' ); 
                        } 
                        else if (allunticked) { 
                            parentCheckbox 
                              .checkbox('set unchecked'); 
                        } 
                        else { 
                            parentCheckbox 
                              .checkbox('set indeterminate'); 
                        } 
                    } 
                }); 
        </script> 
</body> 
  
</html>

Output: The checkboxes by default load up as unchecked. The user can make the head checkbox checked by checking all the ones below. However, if the user clicks on a few of them, then it is in an indeterminate state. If the user, clicks on the head checkbox, all the other child checkboxes get checked and vice versa.