获取复选框总计数并在文本框中保存值（如果选中）

Question

我已经编写了以下代码，以获取Checked chechbox的总数，并保存在文本框中分隔的值checked逗号。

HTML：

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this.value);'></label>
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this.value);'></label>
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this.value);'></label>

<input type="text" name="proId" id="proId">

JS：

function checkCount(elm) {
  var cheCount = $(":checkbox:checked").length;
  document.getElementById('selectCount').innerHTML = cheCount;

  definVal = document.getElementById('proId').value ;
  var inval = elm+","+definVal;
  document.getElementById('proId').value = inval;

  if(cheCount==0){
    document.getElementById('proId').value = "";
  }
}

检查下图中的输出：

我的问题是，当我取消选中该复选框时，其值是在文本框中添加而不是删除。

Answer 1

进行以下更改，仅调用js方法不发送其值

然后按他们的类名检查

 function checkCount(elm) { var checkboxes = document.getElementsByClassName("checkbox-btn"); var selected = []; for (var i = 0; i < checkboxes.length; ++i) { if(checkboxes[i].checked){ selected.push(checkboxes[i].value); } } document.getElementById("proId").value = selected.join(); document.getElementById("total").innerHTML = selected.length; } 

 <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label> <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label> <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label> <input type="text" name="proId" id="proId"> <div>Total Selected : <span id="total">0</span></div>