基於複選框輸入值

Question

我想有輸入複選框列表（將由PHP在以後的時間中產生），但對於現在的內容動態更新DIV信息是靜態的。因此，根據輸入，能夠選擇一名員工，根據選擇填充我的div，並在取消選中輸入時刪除同一名員工。我還需要能夠選擇多個員工，而不只是一個。目前它更新與員工的股利，但我不能刪除該員工。我也一次只能選擇一名員工（需要能夠一次點擊儘可能多的員工）。

這裏是我的了：

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'); 
    } 
});