Get Value of Toggle Checkbox in Semantic UI

jquery checkbox semantic-ui
Danny picture Danny · Jul 17, 2016 · Viewed 10.9k times · Source

I have a Semantic UI toggle checkbox setup in HTML like this

<div class="ui toggle mini checkbox">
    <input type="checkbox" name="myLayer">
    <label>myLayer</label>
</div>

And I want to perform some action when the checkbox is either toggled or untoggled. Right now I have this written:

$('.ui.toggle').click(function() {
    checked = $('.ui.toggle').is(':checked');
    console.log(checked);
    if (checked === true) {
        myLayer.show();
    }
    else {
        myLayer.hide();
    }
});

However, the value of checked is always false, no matter whether the toggle is on or off! Why is this the case?

Answer

Kjell picture Kjell · Jul 17, 2016

The selector '.ui.toggle' is referencing the parent container of your input. The right selector would be '.ui.toggle input'. Then you also should get a changing value for your variable.

Since you are already in the click handler, it would be even nicer to search for your input this way: $(this).find('input').is(':checked'). This way jQuery does not has to parse the whole DOM tree once again to find the input child node.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
Setting "checked" for a checkbox with jQuery

I'd like to do something like this to tick a checkbox using jQuery: $(".myCheckBox").checked(true); or $(".myCheckBox").selected(true); Does such a thing exist?

Read More
Check if checkbox is checked with jQuery

How can I check if a checkbox in a checkbox array is checked using the id of the checkbox array? I am using the following code, but it always returns the count of checked checkboxes regardless of id. function isCheckedById(…

Read More