原因

Question

设置：

jQuery 3.2.1
Semantic UI 2.1
铬

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

所以，经过大量的头撞，找出了问题。对于子孙后代，我的答案就在这里：

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

原因

这些复选框位于模态中。当语义初始化模态时，它会创建所有项目的副本，并将它们添加到DOM的末尾。

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

按ID搜索时，将使用具有该ID的DOM元素的最后一个副本;我所做的任何更改（检查/取消检查）都将发生在副本上，而不是原始内容。

注意：对于模态中的语义下拉列表也是如此。

解决方案

将您的复选框（或下拉列表）放入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
});

每个复选框显示两次

2 个答案:

原因

解决方案