获取语​​义切换复选框的值 UI

Question

我在 HTML 中有一个语义 UI 切换复选框设置，就像这样

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

我想在选中或取消选中复选框时执行一些操作。现在我写了这个：

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

然而，checked 的值始终是 false，无论开关是否打开！为什么会这样？

Answer 1

选择器 '.ui.toggle' 引用了您输入的父容器。正确的选择器是 '.ui.toggle input'。然后你也应该为你的变量获得一个变化的值。

由于您已经在点击处理程序中，以这种方式搜索您的输入会更好：$(this).find('input').is(':checked')。这样 jQuery 就不必再次解析整个 DOM 树来找到输入子节点。

Answer 2

如果您使用 Semantic 初始化您的复选框会更好：

$('.ui.toggle').checkbox({
  onChecked: function () { myLayer.show(); },
  onUnchecked: function () { myLayer.hide(); }
});

当然，您始终可以使用 .checkbox('is checked') 或 .checkbox('is unchecked') 读取复选框的值。为了能够读取值，您的复选框必须用 $('.ui.toggle').checkbox().

初始化

例如，此代码与我的答案顶部的部分执行相同的操作：

$('.ui.toggle').checkbox();

$('.ui.toggle').click(function() {
    if ($('.ui.toggle').checkbox('is checked')) {
        myLayer.show();
    }
    else {
        myLayer.hide();
    }
});