htmlのformの表示について【Jquery】

質問

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function formChanged(ev){
var sel = $('.chk:checked').map(function () {
return this.checked ? this.value : null;
}).get().join();
$("#output").text(sel);
}
formChanged(null);
$(document).on("change",'.chk:checked',formChanged);

</script>

<form method="post" action="mail.php">
<table>
<tr>
<th>カテゴリー</th>
<td>
・ABC：
<input type="checkbox" name="カテゴリー[]" value="[abc]" class="chk" />
・DEF：
<input type="checkbox" name="カテゴリー[]" value="[def]" class="chk" />
・GHI：
<input type="checkbox" name="カテゴリー[]" value="[ghi]" class="chk" />
</tr>
<tr>
<th>選択した製品シリーズ</th>
<td><span id="output"></span></td>
</tr>
<tr>
</table>
</form>

これは、チェックボックスにチェックをいれたチェックボックスの値がリアルタイムに表示される仕組みなのですが、逆にチェックを外した場合は、値が消えません。消えるようにするにはどうしたらいいでしょうか。アドバイスをいただけると幸いです。

回答No.2

fujillin

チェックがある場合だけ処理するように設定しているからではないのですか？
　＞ .chk:checked

回答No.1

Taiyonoshizuku

難しいこと考えずに一回表示をリセットしたら？

function formChanged(ev){
$("#output").text('');