Kashif Kashif - 5 months ago 29
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>
</div>
</div>


Javascript:

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) {
$userData.removeClass('hidden');
}
else {
$userData.addClass('hidden');
}

}

$services.checkbox({
'onEnable': function() {updateElements(this, true)},
'onDisable': function() {updateElements(this, false)}
});


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

My question is how to do that?

Answer

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) {
    $userData.removeClass('hidden');
}
else {
    $userData.addClass('hidden');
}
Comments