チェックボックスにチェックされたものをチェックボックスごと別の所に表示したい

Question

前提・実現したいこと

モーダルウィンドウでチェックされたチェックボックスの値を自動表示させるところまではできたのですが、
チェックされた状態のチェックボックスごと表示させたいです。

（参考イメージ）
https://doda.jp/DodaFront/View/JobSearchTop/j_from_global_navi__True/

よろしくお願い致します。

該当のソースコード

<!-- モーダル -->
<label><input type="checkbox" name="color" value="RED" />RED</label>
<label><input type="checkbox" name="color" value="BLUE" />BLUE</label>
<label><input type="checkbox" name="color" value="GREEN" />GREEN</label>
<!-- モーダルここまで -->

<ul class="result"></ul>

$(function(){
    $('[name="color"]').change(function(){
        var aryCmp = [];
        $('[name="color"]:checked').each(function(index, element){
            aryCmp.push($(element).val());
        });
        $('.result').html('<li>'+aryCmp.join('</li><li>')+'</li>');
    });
});

Comments

[FKM]

なにか調べてみたこと、やってみたことを記載してください。
解決策はあります。

[kyoya0819]

> チェックされた状態のチェックボックスごと表示させたいです。

よくわかりません。

表示されたままなので、わざわざ再表示をする必要性があるのでしょうか？

Answer 1

こういうことですか？

$('.result').html('<li>'+aryCmp.join('</li><li>')+'</li>').append($('[name="color"]:checked'));