<FORM> 如果没有选中复选框，警告！ .. 否则 .. 提交。 (Javascript)答案

【问题标题】：<FORM> If no checkbox is selected, alert! .. ELSE .. submit. (Javascript)<FORM> 如果没有选中复选框，警告！ .. 否则 .. 提交。 (Javascript)
【发布时间】：2012-11-02 19:26:50
【问题描述】：

语言：Javascript

我真的很讨厌问这样一个看似简单的问题，但看起来很简单，我无法解决这个问题。

我正在尝试完全使用 纯 Javascript（不支持库）。

我有一个带有复选框的表单...
所有复选框都命名为files[]，因为我使用数组中的结果：

<input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
<input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
<input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>

我要做的是，当用户提交表单时：

如果没有选中复选框>>返回ALERT！
ELSE 提交表单

这是我的表格：

<form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>

这是我的 Javascript 代码：

function confirm_update() {
    var aCheckbox = document.deleteFiles.getElementsByTagName('input');

    if (aCheckbox.checked){
    return confirm("Are you sure you want to proceed deleting the selected files?");

    } else {
        alert("You do not have any selected files to delete.");
        return false;
    }
}

实际操作： http://jsfiddle.net/DVqwB/3/

显然，它不起作用，我知道我应该使用getElementsById，但由于它们每个都有唯一的 ID，所以我不能使用它。而且我也知道这个网站上有很多解决方案，但如果你看一下 - 他们实际上使用 jQuery...

任何帮助和指导将不胜感激！非常感谢。

【问题讨论】：

标签： javascript forms checkbox validation

【解决方案1】：

迭代集合的正确方法是：（完整示例）

function confirm_update() {
    var arrCheckboxes = document.deleteFiles.elements["files[]"];
    var checkCount = 0;
    for (var i = 0; i < arrCheckboxes.length; i++) {
        checkCount += (arrCheckboxes[i].checked) ? 1 : 0;
    }

    if (checkCount > 0){
        return confirm("Are you sure you want to proceed deleting the selected   files?");
    } else {
        alert("You do not have any selected files to delete.");
        return false;
    }
}

body {
    margin: 30px;
}

<form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();">
    
    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br />
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br />
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br />
    <input type="submit" value="Submit" name="submit" />
    
</form>

【讨论】：

谢谢！这绝对有效，感谢您的时间和知识。我将在 8 分钟内接受这个作为正确答案，我现在仍然不能。 :) 再次感谢
干杯，我的荣幸！如果我们这样做了，我还建议您做两件不重要但更好的做法并防止将来出现问题的事情。首先，不要将 ID 仅作为数字提供，而应将其作为 id="check1"、id="check2" 等。其次，不要将提交按钮命名为“提交”，因为如果你愿意，它会与 JavaScript submit() 方法冲突尝试通过代码发布表单。例如，将其命名为“btnSubmit”。
感谢影子向导的回答，正是我一直在寻找的！

【解决方案2】：

getElementsByTagName 返回一个 NodeList（类似于数组），而不是单个元素。

您必须循环遍历它并依次测试每个元素，并且只有在循环结束但没有找到匹配条件的情况下才处理“else”场景。

【讨论】：

【解决方案3】：

你可以使用这个脚本。只需在表单中更改你的文件名

    <form id="deleteFiles" name="deleteFiles" action="yourFileName.html" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>
    <script type="text/javascript">
    function confirm_update() {
        check=false;
        var aCheckbox = document.getElementById('deleteFiles').elements;
        for(i=0;i<aCheckbox.length;++i)
        {
            if(aCheckbox[i].type=='checkbox' && aCheckbox[i].checked)
           {
               check=true;
           }
         }
         if(check==true)
         {
             return confirm("Do u really want to delete?");
        }
        else
            {alert("you haven't selected any of the checkboxex");
            return false;
            }

    }
    </script>

【讨论】：