CHECKBOX入力値に基づいてDIV情報を動的に更新します

Question

入力チェックボックスのリストを作成しようとしていますが、これはPHPによって後で生成されます。したがって、入力に基づいて、従業員を選択することができる、選択に基づいて私のdivを入力し、入力のチェックを外すと、同じ従業員を削除します。私はまた、1人ではなく複数の従業員を選ぶことができる必要があります。現在は、divを従業員に更新しますが、その従業員を削除することはできません。一度に1人の従業員しか選択することもできません（必要に応じて一度に多くの従業員をクリックできる必要があります）。

は、ここで私が得たものである：

HTML

<div id="employee-list"> 
</div> 

<div class="small-2 columns bord-right3 check-box"> 
<input type="checkbox" class="boxid" value="Joe Smith" name="employees"> 
<label class="checkbox-select">Select</label> 
</div> 
<div class="small-10 columns bord-right3"> 
    <span class="employee-name">Joe Smith</span> 
</div> 

<div class="small-2 columns bord-right3 check-box"> 
<input type="checkbox" class="boxid" value="John Smith" name="employees"> 
<label class="checkbox-select">Select</label> 
</div> 
<div class="small-10 columns bord-right3"> 
    <span class="employee-name">John Smith</span> 
</div> 

JS

$('input[name="employees"]').change(function() { 

var inputVal = $('input[name="employees"]:checked').map(function() { 
    return this.value; 
}).get(); 
console.log(inputVal); 

if ($(this).prop('checked')) { //which checkbox was checked 

    if ($(this).val() == inputVal) { 
     $("#employee-list").append('<span class="employee-name2_1"><a href="#" class="item">X</a> ' + inputVal + '</span>'); 
    } 

} else { 
    $('.li_'+$(this).val()).remove(); 
    console.log('item removed'); 
} 

}); 

すべてのヘルプは大歓迎です！もし私が何かを見逃してしまったら、私に知らせてください。

Answer 1

目標を正しく理解していれば、変更リスナー内のコードの一部が不要です。チェックボックスの値を取得するのにmapを使用する必要はありません。$(this).val()で十分です。そこから単一のif/elseが必要に応じて情報を追加または削除できます。

Fiddle

$('input[name="employees"]').change(function() { 
    var inputVal = $(this).val(); 
    var className = inputVal.replace(/ /g, '_'); 

    if ($(this).prop('checked')) { //which checkbox was checked 
    $("#employee-list").append('<span class="span_' + className + '"><a href="#" class="item">X</a> ' + inputVal + '</span>'); 
    } else { 
    $('.span_'+className).remove(); 
    console.log('item removed'); 
    } 
});