每个复选框出现两次

Question

设置：

jQuery 3.2.1
语义UI2.1
Chrome

HTML（基于https://semantic-ui.com/modules/checkbox.html#/definition）：

<div id="checkboxes">
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox1">
        <label>Branch</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox2">
        <label>Branch</label>
    </div>
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox3">
        <label>Branch</label>
    </div>
    ...
</div>

*它们都是初始选中的。**用户取消选中他们想要停用的那些。

在我的 JS 文件中，我使用以下函数来获取选中了哪些复选框：

$('input:checkbox[name=checkboxes]:checked').each(function () {
        // Do something with them
    });

但是，每个复选框显示两次（一次处于新状态 - 选中或未选中，一次处于原始状态 - 全部选中）。这让我的逻辑在这之后变得混乱，使复选标记毫无意义。

我进入 Chrome 开发人员工具，并在控制台中使用相同的选择器。回来了：

input#checkbox2, input#checkbox3, input#checkbox1, input#checkbox2, input#checkbox3

（我没有勾选checkbox1）

关于为什么它会出现两次，或者我在这里遗漏了什么，有什么想法吗？

Answer 1

您可以使用以下方法获取选中的复选框

$('#checkboxes input:checked').each(function () {
   console.log($(this))
 });

Answer 2

所以，经过大量的头脑风暴，想通了这个问题。我的答案在这里，为了后代：

这是使用语义的副产品/语义的工作方式

原因

These checkboxes were in a modal. When Semantic initialises a modal, it creates a copy of all items, and adds them to the end of the DOM.

^ 这会导致出现两个副本，就像我的问题一样。

按 ID 搜索时，将使用具有该 ID 的 DOM 元素的最后一个副本；我所做的任何更改 (checking/un-checking) 都将发生在副本上，而不是原始文件。

注意：对于模态框内的语义下拉菜单也是如此。

解决方案

将您的复选框（或下拉菜单）放入 div，并为其提供一个 ID，就像我上面的原始代码一样。

<div id="my_checkboxes">
    <div class="ui checkbox">
        <input type="checkbox" name="checkboxes" value="checkbox1">
        <label>Branch</label>
    </div>
</div>

但是，不是使用 input 和 name 来引用它们，而是使用此父 div:

来引用它们

$('#my_checkboxes').children().each(function() {
    // do something
});

每个复选框出现两次

Each checkbox shows up twice

html

javascript

checkbox

jquery

semantic-ui

原因

解决方案