<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
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
>