各チェックボックスが二回

Question

を設定し、最大を示しています（https://semantic-ui.com/modules/checkbox.html#/definitionに基づく）

• のjQuery 3.2.1
• セマンティックUI 2.1
• クローム

HTML：

<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

を取得するには、以下の方法を使用することができ、ヘッドバンギングをたくさんした後、問題を考え出しました。 私の答えは後世のために、ここにある：

これは、セマンティックな作品に

これらのチェックボックスは、モーダルにあった

原因をセマンティック/方法を使用しての副産物です。 Semanticがモーダルを初期化すると、 はすべてのアイテムのコピーを作成し、それらをDOMの最後に追加します。

^私の問題のように、2つのコピーが表示されます。

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)) 
});