验证是否检查了1到3个复选框，但id不同

validate if 1 to 3 chekboxes are cheked but with different id

本文关键字：复选框 id 不同 3个 是否 检查 验证      更新时间：2023-09-26

我这里有一个小问题，所以我有一个表单，里面有8个复选框所有的图片都在上面，所以如果用户点击图片来检查他们的特定复选框。

以下是我的复选框代码和验证它们的脚本：

function logotype() {
  var group = document.newlogo.ltype;
  for (var i=0; i<group.length; i++) {
    if (group[i].checked)
      break;
  }
  if (i==group.length)
    return alert("Please select 1 to 3 Logo Types");
}
<div class="thumb1" >
  <label for="letter"><img class="img" src="images/my2.jpg"  /></label>
  <input type="checkbox" class="chk"   name="ltype[]"  id="letter" value="letter" />
  <hr>
  <p><strong>Letter Mark Logo</strong></p>
</div>
<div class="thumb1">
  <label for="emblerm"><img class="img" src="images/my3.jpg"  /></label>
  <input type="checkbox" class="chk"   name="ltype[]" id="emblerm" value="emblerm" />
  <hr>
  <p><strong>Emblerm Logo</strong></p>
</div>

正如你可能看到的id="ltype"，如果我用相同的id制作我的所有复选框，它可以进行验证，但在这之后，我的复选框就不能从图像中检查了，因为for="anothername"如果我输入ltype，它会让所有的jujst选择一个字段。

所以问题是：我能以某种方式根据它们的类名验证复选框吗？这样在提交时至少会选中1到3个复选框？

您可以使用getElementsByClassName()方法使用类名访问复选框，并按如下方式验证它们：

function logotype() {
  var failure = true,
  count =0,
  group = document.getElementsByClassName("chk");
  for (var i=0; i<group.length; i++) {
    if (group[i].checked)
      count++;
    if(count>=3){
      failure =false;
      break;
    }
  }
  if (failure){
     alert("Please select 1 to 3 Logo Types");
     return false;
  }
}
相关文章：