JS实现统计复选框选中个数并提示确定与取消的方法

作者:纸飞机时间:2026-10-29 12:06:23浏览:497

本文介绍如何使用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编程有所帮助。

作者最新文章