Kashif Kashif - 1 year ago 199
jQuery Question

Semantic-ui: determine if checkbox is checked or not

My code is using the semantic-ui checkbox module. I have four checkboxes. The code needs to determine when all the chekboxes are unchecked.

Html for one of the checkboxes:

<div class="inline field">
<div class="ui toggle checkbox insurance">
<input type="checkbox" name="insurance">
<label>Would You Like To Reduce Your Monthly Insurance Costs</label>


var $services = $('.service-selection').find('.ui.checkbox'),
$userData = $('.user-data');

function updateElements(elem, show) {

// show second segment only when atleast one service checkbox is checked
if ($services.filter(":checked").size() > 0) {
else {


'onEnable': function() {updateElements(this, true)},
'onDisable': function() {updateElements(this, false)}

Turns out that semantic-ui does not actually set the
attribute of corresponding
element. So the
selector fails.

My question is how to do that?

Answer Source

I think the problem is the services selector($services), you need to in the input element within the .ui.checkbox element

var $services = $('.service-selection').find('.ui.checkbox input')

also .size() is deprecated use .length

if ($services.filter(":checked").length > 0) {
else {