基于复选框输入值

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