Write JS code for beautiful multiple select

aleksis/apps/alsijil/static/js/alsijil/person.js

+$(document).ready(function () {
+    $("#select_all_container").show();
+    $("#select_all_box").change(function (event) {
+        if ($(this).is(":checked")) {
+            $(document).find('input[name="selected_notes"]').prop({
+                indeterminate: false,
+                checked: true,
+            });
+        } else {
+            $(document).find('input[name="selected_notes"]').prop({
+                indeterminate: false,
+                checked: false,
+            });
+        }
+    });
+
+    $('input[name="selected_notes"]').change(function () {
+        var checked = $(this).is(":checked");
+        var indeterminate = false;
+        $(document).find('input[name="selected_notes"]').each(function () {
+            if ($(this).is(":checked") !== checked){
+                $("#select_all_box").prop({
+                    indeterminate: true,
+                })
+                indeterminate = true;
+                return false;
+            }
+        });
+        if (!(indeterminate)) {
+            $("#select_all_box").prop({
+                indeterminate: false,
+                checked: checked,
+            });
+        }
+    });
+});
\ No newline at end of file

aleksis/apps/alsijil/templates/alsijil/class_register/person.html

@@ -8,6 +8,7 @@
 
 {% block extra_head %}
     <link rel="stylesheet" href="{% static "css/alsijil/person.css" %}">
+    <script src="{% static "js/alsijil/person.js" %}" type="text/javascript"></script>
 {% endblock %}
 
 {% block browser_title %}{% blocktrans %}Class register: person{% endblocktrans %}{% endblock %}