使用 Javascript 循环检查复选框答案

【问题标题】：Looping through Checkboxes using Javascript使用 Javascript 循环检查复选框
【发布时间】：2011-08-28 04:12:10
【问题描述】：

我尝试使用在这里和其他地方找到的 JavaScript 示例。问题是我正在使用在服务器上工作的表格控件，所以我使用的 JavaScript 无法识别服务器端的复选框。我一遍又一遍地收到相同的错误消息。我得到了 20 行，每行 2 列，一列用于复选框，另一列用于用户在提交之前必须通过选中该框来验证的语句。用户必须亲自检查每个框。如果未选中任何复选框，那么我希望看到一条弹出消息说他们必须选中所有框，否则我正在重定向到另一个页面，当然这一切都在按钮单击事件上。这一切都在 Visual Studio 2010 上，使用 C#，后端是 SQL Server。

这里是我使用的 JS 示例：

function checkCheckBoxes() {
  if (document.frmTest. CheckBox1.checked == false &&
      document.frmTest. CheckBox2.checked == false &&
      document.frmTest. CheckBox3.checked == false &&
      document.frmTest. CheckBox4.checked == false &&
      document.frmTest. CheckBox5.checked == false &&)
  {
    alert ('You must check all the checkboxes!');
    return false;
  }else{
    return true;
  }
}

那么，

<form onsubmit="return checkCheckBoxes();" action="">
<input type="checkbox" name=" CheckBox1" value="1">
<input type="checkbox" name=" CheckBox2" value="2">
<input type="checkbox" name=" CheckBox3" value="3">
<input type="checkbox" name=" CheckBox4" value="4">
<input type="checkbox" name=" CheckBox5" value="5">
<input type="submit" value="Submit!" />
</form>

但我意识到复选框不能是服务器控件，而是 JavaScript 控件。谢谢。

【问题讨论】：

复选框都是独立的，还是由数据控件生成的，例如Repeater？

标签： javascript forms loops checkbox

【解决方案1】：

你需要这样的东西

var pass = true;

for (var i = 0; i < form.elements.length; i++ ) 
{
    if (form.elements[i].type == 'checkbox')
    {
        if (form.elements[i].checked == false)
        {
            pass = false;
        }
    }
}

if(!pass)
{
    alert ('You must check all the checkboxes!');
}

return pass;

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用 C# ClientID 属性获取复选框的 HTML ID。将该 ID 插入到您的 Javascript 中，然后您就可以选择相关的复选框并对它们进行任何您喜欢的操作。

【讨论】：

【解决方案3】：

使用 querySelectorAll 检查任何未选中的复选框。如果有，则抛出错误消息，否则回发。

function checkCheckboxes(){
   if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length > 0){
     alert("all checkboxes must be checked");
     return false;
   } else{
     return true;
   }
}

注意：这仅适用于现代浏览器 Firefox 3.1+、IE8+（仅在 IE8 标准模式下）和 Safari 3.1+

【讨论】：