appendToの配列の現在の選択を表示

Question

以下のスニペットでは、データ属性cal-choiceを確認してから、クラスを削除してからpg-img-reviewに追加します。私が考え出している問題は、現在の選択肢だけを表示する方法です。チェックボックスをオンにしてチェックを外すと、テキストはそのまま残ります。

もう一つは、表示するだけですが、チェックボックスはチェックボックス（ラジオボタンではありません）として保存します。

誰かが私が間違っている、または何をする必要があるかを見ていますか？

$('body').on('change', '.option-check', function() { 
 
    var lim = 1; 
 
    var calPrevImg = []; 
 
    $('.option-check:checked').each(function() { 
 
    calPrevImg.push($($(this).data('cal-choice'))); 
 
    for (var i = 0, len = calPrevImg.length; i < len; i++) { 
 
     calPrevImg[i].removeClass('cal-selected-img').appendTo('#pg-img-review'); 
 
    } 
 
    }); 
 
});

.cal-selected-img { 
 
    color: red; 
 
    font-size: 2rem; 
 
} 
 
.small { 
 
    color: blue; 
 
    font-size: 1.1rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>"> 
 
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'> 
 
Goodbye</div>"> 
 
<div id="pg-img-review"></div>

Answer 1

私はあなたのコードの一部を再配置。現在の内容を消去してから、forループを繰り返して繰り返し追加するのを避けました。私はこれが望ましい動作であることを90％確信しています。助けを再び

$('body').on('change', '.option-check', function() { 
 
    var lim = 1; 
 
    var calPrevImg = []; 
 
    $('.option-check:checked').each(function() { 
 
    calPrevImg.push($($(this).data('cal-choice'))); 
 
    }); 
 
    $('#pg-img-review').html(""); 
 
for (var i = 0, len = calPrevImg.length; i < len; i++) { 
 
    calPrevImg[i].removeClass('cal-selected-img').appendTo('#pg-img-review'); 
 
    } 
 
});

.cal-selected-img { 
 
    color: red; 
 
    font-size: 2rem; 
 
} 
 
.small { 
 
    color: blue; 
 
    font-size: 1.1rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>"> 
 
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'> 
 
Goodbye</div>"> 
 
<div id="pg-img-review"></div>