Javascript，Jquery：如何在一个div中使用CheckBox自动添加和删除元素，；elem显示在另一个带有javascript的div中

我有两个div。一个元素有三个元素（John、Snow、Stock）。在每个元素之前，都有一个复选框。选中John后，它将显示在staff div中。如果取消选中John，它将消失。当选中elems以添加_sub（e）时，它工作正常。一旦取消选中，它将失败，并显示Nana

我的div代码：

<div id="role_div">
<table >
<td style="word-break:break-all;"><input type="checkbox" name="uId" value="John">John</td>
<td style="word-break:break-all;"><input type="checkbox" name="uId" value="Snow">Snow</td>
<td style="word-break:break-all;"><input type="checkbox" name="uId" value="Stock">Stock</td>
</table>
</div>
<div id="staff" onclick="this.focus();"></div>

约翰
雪
股票

我的js代码：

var staff = document.getElementById("staff");
function add_sub(el) {
    if (el.checked){
        currNum += el.value+'<br />';
    } else {
        currNum -= el.value+'<br />';
    }
    staff.value = currNum;
}

form.addEventListener("click", function(ev){
        if(ev.target.getAttribute("type") == "checkbox"){
            add_sub(ev.target);
        }
    },false);
}    `

var staff=document.getElementById（“staff”）；
功能添加子单元（el）{
如果（标高已勾选）{
currNum+=el.value+'
'；
}否则{
currNum-=el.value+'
'；
}
staff.value=currenm；
}
表单。添加的EventListener（“单击”，函数（ev）{
if（ev.target.getAttribute（“类型”）=“复选框”）{
增加子项（电动汽车目标）；
}
}，假）；
}    `

---

我的代码不是最好的方法。谁能帮我？

我已经解决了这个问题

var currNum="" ;
var selected_staff = document.getElementById("selected_staff");
//var form = document.getElementById("transmit_form"); 
function add_sub(el)
{
  if (el.checked)
  {
   //alert(el.value);
   selected_staff.innerHTML += el.value+'<br />';
  // selected_staff.innerHTML=currNum; 
  selectedStaff.value = selected_staff.innerHTML;
  alert(selectedStaff.value);
  }
  else
  {
    // currNum -= el.value;
    var strReplace = el.value+'<br>';
    //alert(strReplace);
    selected_staff.innerHTML = selected_staff.innerHTML.replace(new RegExp(strReplace,"g"),"");
    selectedStaff.value = selected_staff.innerHTML;
    alert(selectedStaff.value);
  }

}
staff_div.addEventListener("click", function(ev){
if(ev.target.getAttribute("type") == "checkbox"){
    add_sub(ev.target);
    }
},false);

var currNum=”“；
var selected_staff=document.getElementById（“selected_staff”）；
//var form=document.getElementById（“传输表单”）；
功能添加子单元（el）
{
如果（标高已勾选）
{
//警报（el.值）；
选定的_staff.innerHTML+=el.value+'
'；
//选中的\u staff.innerHTML=currNum；
selectedStaff.value=selected_staff.innerHTML；
警报（selectedStaff.value）；
}
其他的
{
//currNum-=el.值；
var strReplace=el.value+'
'；
//警报（strReplace）；
selected_staff.innerHTML=selected_staff.innerHTML.replace（new RegExp（strReplace，“g”），“”）；
selectedStaff.value=selected_staff.innerHTML；
警报（selectedStaff.value）；
}
}
员工部添加的事件监听器（“点击”，功能（ev）{
if（ev.target.getAttribute（“类型”）=“复选框”）{
增加子项（电动汽车目标）；
}
}，假）；

add\u sub（）函数中的currNum未定义。在它有一些值之前，您正在使用它。我已经定义了currNum。var currNum=“”；var selected_user=document.getElementById（“selected_user”）；var form=document.getElementById（“传输表单”）；函数add_sub（el）{取消选择时，选中的_user.value将使元素消失。e
请共享HTML和整个JS代码，以便更好地理解此问题。