本文介绍如何使用JavaScript统计页面中复选框的选中数量,并在用户点击提交时通过confirm弹窗确认操作。代码遍历名为ck[]的复选框,统计选中项后弹出包含数量的确认框,用户选择确定则执行后续逻辑,取消则返回false。
JavaScript统计复选框与确认逻辑实现
本文分享了一种使用JavaScript统计复选框选中数量,并在操作前通过弹窗提示用户确认或取消的方法。
具体的JavaScript实现代码如下:
<script type="text/javascript">
function yesno() {
var inputs = document.getElementsByName("ck[]");
var checked_counts = 0;
for(var i=0;i<inputs.length;i++){
if(inputs[i].checked){checked_counts++;
}
}
if(confirm("你已选择了 " + checked_counts + " 个网址,\n你确定选择删除过滤网址吗?")){
//return true;
ShowDiv('MyDiv','fade');
}else{
return false;
}
}
</script>
对应的HTML页面结构如下:
<form id="form1" name="form1" method="post" action="">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="checkbox" name="ck[]" id="ck[]" value="{$vo.id}" onclick="javascript:chkRow(this);">
<input type="submit" name="submit" id="submit" class="subbut" onclick="return yesno();" value="选择删除信息">
</form>
希望本文提供的代码示例能对读者的JavaScript编程有所帮助。