验证是不是选中了 1 到 3 个复选框但具有不同的 id

Posted 2023-05-09

【中文标题】验证是不是选中了 1 到 3 个复选框但具有不同的 id

【英文标题】：validate if 1 to 3 chekboxes are cheked but with different id验证是否选中了 1 到 3 个复选框但具有不同的 id

【发布时间】：2014-11-24 03:44:12

【问题描述】：

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

这是我的 chekboxex 的代码和验证它们的脚本：

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 它会全部只需选择一个字段。 .

所以问题是：我能否以某种方式根据它们的类名验证复选框，以便在提交时至少选中 1 到三个复选框？

【问题讨论】：

“如果我让所有的复选框都使用相同的 id” - 不要这样做，id 在文档中应该是唯一的。如果一个文档中有多个元素具有相同的id，可能会导致意想不到的结果...

<center> 已弃用，请改用 CSS text-align: center。 ids 必须是唯一的。 document.newlogo.ltype 不是标准的，我认为您的意思是 document.forms.newlogo.elements.ltype。并且请写清楚（例如使用“因为”，而不是“cuz”），我修复了我能解决的问题，但我发现有些部分难以理解（例如“pyt”）。

我不知道这些家伙感谢我第一次处理和验证表单。

【参考方案1】：

您可以使用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;
  

【讨论】：

@TJ 这个代码结构的一个问题即使我在提交时检查了一个或三个选项然后进程继续但警报显示我应该做什么，它也会给我带来警报？

@NewLogo 你是什么意思“*然后过程继续但警报显示”* - 过程是什么..？你在提交<form>吗？

@T J 表单被提交，我在单击警报的确定后获取数据。我的意思是当所有字段都填写正确并单击提交按钮时，它会显示“请选择 1 到 3 种徽标类型”，然后单击“确定”后，表单将按应有的方式提交

@NewLogo 如果要阻止<form> 提交，请将<form> 更改为<form onsubmit="return logotype()"/> 并从函数中返回false，如answer 所示。

@NewLogo 我想我误解了这个问题 - 答案检查是否至少选中了 3 个复选框... 到底是什么意思，所以至少有 1 到三个复选框被选中“ - 没有意义......你到底想做什么？