jQueryのチェックボックスをオフにするにはどうすればよいですか？

Question

チェックボックスをオフにすると、結果も追加されます。私はそれを取り除きたい。私は何をすべきか？

$(document).ready(function(){ 
    $('.chk_val').on('click',function(){ 
     var result = $(this).val(); 
     $('#course').append(result); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="show"> 
<span id="course"> </span> 
</div> 

<input type="checkbox" class="chk_val" value="20" />20 
<br /> 
<input type="checkbox" class="chk_val" value="30" />30 
<br /> 
<input type="checkbox" class="chk_val" value="40" />40 
<br /> 

Answer 1

$(document).ready(function() { 
 
    $('.chk_val').on('click', function() { 
 
    var result = $('.chk_val:checked').map(function() { 
 

 
     return $(this).val() 
 
    }).get(); 
 
    $('#course').html(result); 
 

 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="show"> 
 
    <span id="course"> </span> 
 
</div> 
 

 
<input type="checkbox" class="chk_val" value="20" />20 
 
<br /> 
 
<input type="checkbox" class="chk_val" value="30" />30 
 
<br /> 
 
<input type="checkbox" class="chk_val" value="40" />40 
 
<br />

1. チェックされた項目の値をマッピングします。
2. .html()を使用してdivのHTMLを変更します