javascript - 每个复选框显示两次

建立:

jQuery 3.2.1

语义UI 2.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)

关于它为什么会出现两次的任何想法，或者我在这里缺少什么？

最佳答案

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

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