验证将数组作为名称参数的复选框

Validate Checkbox that has an array as name parameter

本文关键字：参数 复选框 数组 验证      更新时间：2023-09-26

我曾经用这样的代码验证复选框表单：

<div>
  <form action="survey.php" method="post" name="survey"> 
  <span class="form"><input type="checkbox" name="event1" onClick="return countMarketing()">Event1</span>
  <span class"form"><input type="checkbox" name="event2" onClick="return countMarketing()">Event2</span>
  <span class"form"><input type="checkbox" name="event3" onClick="return countMarketing()">Event2</span>
  <!-- other forms -->
  </form>
</div>

还有一个类似于这样的javascript验证（以限制选中复选框的数量）：

function countMarketing() {
        var NewCountMarketing = 0
        if (document.survey.event1.checked)
        {NewCountMarketing = NewCountMarketing + 1}
        if (document.survey.event2.checked)
        {NewCountMarketing = NewCountMarketing + 1}
        if (document.survey.event3.checked)
        {NewCountMarketing = NewCountMarketing + 1}
        if (NewCountMarketing == 3)
        {
            alert('Please choose only two')
            document.survey; return false;
        }
    }

这样的验证是有效的。但是现在，假设我使用php来提交，我如何在JS中检查表单名称是否如下：

 <input type="checkbox" name="events[]" id="event1" onClick="return countMarketing()">Event1

我试着把JS改成：

if (document.survey.events[].checked)
    {code here}
if (document.survey.getElementByName('events[]').checked)
    {code here}
if (document.survey.getElementById('event1').checked)
    {code here}

但是它不起作用。。有人能告诉我这件事吗？非常感谢：）

如果您实际上正在使用jQuery，您可以执行以下操作：

在使用此函数之前，请确保在文档中包含jQuery；在您尝试运行函数之前加载文档。

function countMarketing() {
  if( $('input[name="events[]"]').filter(':checked').length > 2 ) {
    alert('Please choose only two');
  }
}

首先移除inline events declaration并将其移动到external Javascript file或script block

您可以始终使用bracket Notation访问此类属性

document.survey["events[]"]

代码

    var elems = document.survey,
    checkboxNames = ["event1[]", "event2[]", "event3[]"];
for (var i = 0; i < checkboxNames.length; i++) {
    bindClick(elems[checkboxNames[i]]);
}
function bindClick(elem) {
    elem.addEventListener('click', countMarketing);
}
function countMarketing() {
    var NewCountMarketing = 0
    var latest;
    for (var i = 0; i < checkboxNames.length; i++) {
        if (elems[checkboxNames[i]].checked) {
            latest = elems[checkboxNames[i]];
            NewCountMarketing++;
        }
    }
    if (NewCountMarketing == 3) {
        latest.checked = false;               
        alert('Please choose only two')
        document.survey;
        return false;
    }
}

检查Fiddle

相关文章：