使用 Javascript 循环遍历复选框

Question

我尝试使用在这里和其他地方找到的 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 控件。谢谢。

Answer 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;

希望这会有所帮助。

Answer 2

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

Answer 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+