[英]Get Checkbox total count & save value in textbox if checked
我已經編寫了以下代碼,以獲取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 = "";
}
}
我的問題是,當我取消選中該復選框時,其值是在文本框中添加而不是刪除。
進行以下更改,僅調用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.