显示在文档本身中选中了多少个表单复选框

Showing how many form checkboxes are checked in document itself

本文关键字：多少 表单 复选框 文档 显示      更新时间：2023-09-26

我已经编写了一个ASP页面，在这里使用一个例子，显示有多少复选框在一个弹出式警报框的表单。问题是，我们现在有这么多的窗体上的框，它需要永远选择一个框，关闭警报，检查另一个框，关闭警报…我想改变或替换代码，以显示在文档的HTML中复选框的数量，而不是一个警报，更新计数框被选中或未选中。下面是用于计算框数并显示警告的脚本:

<script language="JavaScript">
function checkTotalCheckedBoxes()
{
     var checkLength = 0;
     var boxes = document.getElementById("yyy").getElementsByTagName("input");
     for (var i = 0; i < boxes.length; i++)
     {
         boxes[i].checked ? checkLength++ : null;
     }
     alert (checkLength + " boxes are checked." );
}
</script>

我还有一个"全选"脚本，它可以一次选择所有的框。唯一的问题是"全选"复选框在使用后保持选中状态，即使有些复选框被取消选中。我需要修改脚本，取消勾选"全选"框是用户单击它，然后取消选择任何选中的框。

脚本如下:

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('checkbox');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  } 
       var checkLength = 0;
     var boxes = document.getElementById("yyy").getElementsByTagName("input");
     for (var i = 0; i < boxes.length; i++)
     {
         boxes[i].checked ? checkLength++ : null;
     }
     alert (checkLength + " boxes are checked." );
}
</script>
非常感谢您提供的任何帮助!

如果不提供HTML代码，我只能猜测您的页面布局是什么样的。话虽如此，看看这把小提琴:https://jsfiddle.net/yxo6de48/

它应该为你提供一点指导，如果没有别的，如何实现你正在寻找的。

Javascript: 

function checkTotalCheckedBoxes()
{
     var checkLength = 0;
     var boxes = document.getElementById("yyy").getElementsByTagName("input");
     for (var i = 0; i < boxes.length; i++)
     {
         boxes[i].checked ? checkLength++ : null;
     }
     document.getElementById("count").innerHTML = checkLength + " boxes are checked.";
}
function toggle(source) {
  checkboxes = document.getElementsByName('checkbox');
  for(var i=0; i < checkboxes.length;i++) {
    checkboxes[i].checked = source.checked;
  } 
  checkTotalCheckedBoxes();
}

制作一个标签:

 <label id="lblTest" />

设置文本:

  document.getElementById("lblTest").innerHTML(//value here);

或使用jQuery:

 $("#lblTest").text(//value);
相关文章：