每個複選框顯示了兩次

Question

設置：

• 的jQuery 3.2.1
• 語義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

所以，很多頭撞後，想通了這個問題。 我的答案就在這裏，爲後人：

這是使用語義/途中語義作品

原因

這些複選框是在一個模式的副產品。當語義初始化模式時，它會創建所有項目的副本，並將它們添加到DOM的末尾。

^這會導致兩個副本出現，就像我的問題一樣。

按ID搜索時，將使用具有該ID的DOM元素的最後一個副本;我所做的任何更改（檢查/取消檢查）都會發生在拷貝，而不是原件。

注意：這也適用於模態內的語義下拉。

解決方案

把你的複選框（或下拉菜單）爲div，並給它一個ID，比如我上面的原代碼。

​​

然而，代替參照他們使用input和name於引用它們使用該父div：

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

Answer 2

你可以用下面的方法來獲取選中的複選框

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