(jQuery)チェックボックスの内容を別のddタグの中で動的に表示したい。

前提・実現したいこと

jQuery初心者です。現在、チェックボックスに入力された内容をフォームの上にテキストで表示し、自分が何を選んでいるのか見やすくするプログラムを書いています。　実現したい挙動は、何もチェックされていない状態の時は「無し」と表示され、チェックされると「無し」が消えてチェックされた内容が表示。複数チェックされると項目が増えていき、チェックがはずれるとテキストの内容も消えます。更に、チェックボックスの横にはクリアボタンが置いてあり、押すとチェックが全部はずれ、テキストの内容は「無し」に戻ります。

発生している問題

フォームの上にdd,dtタグを設置、チェックボックスと連動して「無し」からチェック項目がappendで追加されていく所まではきているのですが、クリアボタンを押すと指定したidを含む要素ごと消えてしまうので、クリアした後にチェックするとテキストエリアには表示されない。
**チェックを解除するとテキストも消えるロジックが思いつかない。**問題は太字の２つになります。

該当のソースコー(HTML,jquery)

///フォーム上のテキスト部分
<dt>タグ：</dt>
                        <dd id="tagValueContent"></dd>
                        <dd id="tagValueContentNone">無し</dd>
///チェックボックス部分
<div class="tagcheck">
                    <input type="checkbox" name="tag" id="no37" value="tag1" />
                    <label for="no37"><p>タグ1(仮)</p></label>
                    <input type="checkbox" name="tag" id="no38" value="tag2" />
                    <label for="no38"><p>タグ2(仮)</p></label>
                    <input type="checkbox" name="tag" id="no39" value="tag3" />
                    <label for="no39"><p>タグ3(仮)</p></label>
                    <input type="checkbox" name="tag" id="no40" value="tag4" />
                    <label for="no40"><p>タグ4(仮)</p></label>
                    <input type="checkbox" name="tag" id="no41" value="tag5" />
                    <label for="no41"><p>タグ5(仮)</p></label>
                    <button>設定</button>
                    <button name="clear" value="clear" type="button" id="clear-check">クリア</button>
                </div>

///スクリプト部分
$("input[name='tag']").change(function() {
            const defaultLabel = $('#tagValueContentNone').remove();
            const tagValue = $(this).val();
            console.log(tagValue);

            let tagValueContent;
            switch (tagValue) {
                case "tag1":
                    tagValueContent = "タグ１";
                    break;

                case "tag2":
                    tagValueContent = "タグ２";
                    break;

                case "tag3":
                    tagValueContent = "タグ３";
                    break;

                case "tag4":
                    tagValueContent = "タグ４";
                    break;

                case "tag5":
                    tagValueContent = "タグ５";
                    break;
            }


            $("#tagValueContent").append(tagValueContent);


            $("#clear-check").click(function() {
                $('input:checkbox').prop('checked', false);
                $("#tagValueContent").remove();
                $("#tagValueContentNone").append(defaultLabel);
            });

        });

色々調べたのですが、うまくいかないので、何卒宜しくお願い致します。

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

回答1件

ベストアンサー

tagValueContentとtagValueContentNoneの使い分けが必要かにもよります
それと「設定」ボタンの意義がよくわかりません
ざっくりこんな感じで

javascript
1$(function(){
2  var obj={"tag1":"タグ1","tag2":"タグ2","tag3":"タグ3","tag4":"タグ4","tag5":"タグ5"};
3  $('input[name=tag]').on('change',function(e) {
4    var v=$('input[name=tag]:checked').map(function(e){
5      return obj[$(this).val()];
6    }).get().join("")||"無し";
7    $('#tagValueContent').text(v);
8  });
9  $('#clear-check').on('click',function(e) {
10    $('input[name=tag]').prop('checked',false);
11    $('#tagValueContent').text("無し");
12  });
13});

HTML
1<dt>タグ：</dt>
2<dd id="tagValueContent">無し</dd>
3<div class="tagcheck">
4<label><p><input type="checkbox" name="tag" value="tag1" />タグ1(仮)</p></label>
5<label><p><input type="checkbox" name="tag" value="tag2" />タグ2(仮)</p></label>
6<label><p><input type="checkbox" name="tag" value="tag3" />タグ3(仮)</p></label>
7<label><p><input type="checkbox" name="tag" value="tag4" />タグ4(仮)</p></label>
8<label><p><input type="checkbox" name="tag" value="tag5" />タグ5(仮)</p></label>
9<button>設定</button>
10<button name="clear" value="clear" type="button" id="clear-check">クリア</button>
11</div>
12