Bootstrap Checkboxesを使用してチェックが入っている値を配列で取得したいが、結果が2回表示されてしまう

https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
こちらのBootstrap Checkboxesを使用してドロップダウン内にチェックボックスのリストを作成しております。

html
1<div class="btn-group">
2    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
3        Hoge
4    </button>
5    <ul class="dropdown-menu">
6        <li>
7            <div class="checkbox">
8                <label>
9                    <input type="checkbox" value="1" name="selected_item">
10                    item 1
11                </label>
12            </div>
13        </li>
14        <li>
15            <div class="checkbox">
16                <label>
17                    <input type="checkbox" value="2" name="selected_item">
18                    item 2
19                </label>
20            </div>
21        </li>
22        <li>
23            <div class="checkbox">
24                <label>
25                    <input type="checkbox" value="3" name="selected_item">
26                    item 3													
27                </label>
28            </div>
29        </li>
30        <li>
31            <div class="checkbox">
32                <label>
33                    <input type="checkbox" value="4" name="selected_item">
34                    item 4													
35                </label>
36            </div>
37        </li>
38    </ul>
39</div>

js
1$(".checkbox").on('click', function(){
2    var selected = [];
3    $.each($('input[name="selected_item"]:checked'), function(){
4        selected.push($(this).val());
5    });
6    console.log(selected);
7});

上記の様にdiv class="checkbox"要素がクリックされると現在セレクトされている値をオブジェクトで返したいのですが、どうしてもconsole.logの結果が2回表示されてしまいます。

例） item 1をクリック後、item2をクリックした場合

[]
["1"]
["1"]
(2) ["1", "2"]

想定としては1回目に["1"]2回目のクリックで["1","2"]が帰ってくるのが理想的なのですが、原因が掴めずに格闘しております。
どなたかご教示いただけますと幸いです。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7</head>
8<body>
9<div class="btn-group">
10    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
11        Hoge
12    </button>
13    <ul class="dropdown-menu">
14        <li>
15            <div class="checkbox">
16                <label>
17                    <input type="checkbox" value="1" name="selected_item">
18                    item 1
19                </label>
20            </div>
21        </li>
22        <li>
23            <div class="checkbox">
24                <label>
25                    <input type="checkbox" value="2" name="selected_item">
26                    item 2
27                </label>
28            </div>
29        </li>
30        <li>
31            <div class="checkbox">
32                <label>
33                    <input type="checkbox" value="3" name="selected_item">
34                    item 3
35                </label>
36            </div>
37        </li>
38        <li>
39            <div class="checkbox">
40                <label>
41                    <input type="checkbox" value="4" name="selected_item">
42                    item 4
43                </label>
44            </div>
45        </li>
46    </ul>
47</div>
48<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
49<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
50<script>
51    $("input[type='checkbox']").on('click', function () {// セレクタを変更
52        var selected = [];
53        $.each($('input[name="selected_item"]:checked'), function () {
54            selected.push($(this).val());
55        });
56        console.log(selected);
57    });
58</script>
59</body>
60</html>