Get Value of Toggle Checkbox in Semantic UI
<p>I have a Semantic UI toggle checkbox setup in HTML like this</p>

<pre><code>&lt;div class="ui toggle mini checkbox"&gt;
    &lt;input type="checkbox" name="myLayer"&gt;
    &lt;label&gt;myLayer&lt;/label&gt;
&lt;/div&gt;
</code></pre>

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

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

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