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启用复选框，则会更好：

private resultsRowSelectionChanged(selection: any): void {
   if (selection.selected) {
      this.selectedMembership = this.resultsData.data[selection.index];
   }
   else {
      this.rightPanel.clearClientInfo();
   }
}

当然，您始终可以使用$('.ui.toggle').checkbox({ onChecked: function () { myLayer.show(); }, onUnchecked: function () { myLayer.hide(); } });或.checkbox('is checked')阅读复选框的值。为了能够读取该值，您的复选框必须使用.checkbox('is unchecked')进行初始化。

例如，此代码与我的答案之上的段完全相同：

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

在语义UI中获取切换复选框的价值

2 个答案: