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

根据CHECKBOX输入值动态更新DIV信息

1 个答案: