Question

我在表单中有一组复选框，如下所示：

<form name="form1" onsubmit="return window.Validate()" method="post" action="myprog.cgi">
    <div id="filters"> 
        <input name="One_f" type="checkbox"> No. 1<br> 
        <input name="Two_f" type="checkbox"> No. 2<br> 
        <input name="Three_f" type="checkbox"> No. 3<br>
    </div>
    <div id="Colors">
        <input name="Red" type="checkbox"> Red<br> 
        <input name="Blue" type="checkbox"> Blue<br> 
        <input name="Green" type="checkbox"> Green<br>
    </div>
    <div id="Button">
        <input name="Submit" value="Submit" type="submit">
    </div>
</form>

我想在Javascript中编写一个函数Validate，看看div中是否有任何复选框 filters已经过检查。如果没有选中它们，它应该显示一个警告框并阻止cgi 被执行。 div filters中的复选框的名称都以_f结尾，如果有帮助的话。我该如何编写这样的函数？

Answer 1

这是一个jQuery解决方案，我会在短时间内添加一个普通的JS。

$('form[name="form1"]').on('submit', function(e) {
    if(!$('#filters input:checkbox:checked').length) {
        e.preventDefault();
        alert('Please select at least one filter.');
    }
});

此代码不需要onsubmit内联事件。

由于您不熟悉jQuery，我会更彻底地解释它：

$('form[name="form1"]')创建一个jQuery对象，其中包含与选择器匹配的所有元素。如果您提供表单id="form1"并使用$('#form1')
.on()绑定事件处理程序。传递给回调函数的第一个参数是一个包装的事件对象，我们需要它来防止在必要时提交表单。
$('#filters input:checkbox:checked')选择所有已检查的#filters子项复选框。 :checkbox和:checked是伪选择器，只匹配当前选中的复选框）
.length是jQuery对象中的元素数 - 如果没有选中，则为零
e.preventDefault();阻止执行事件的默认操作，即不会提交表单。

通常，您可以使用$(document).ready(function() { ... });将整个代码包装起来，以便在DOM准备就绪后立即执行 - 如果您将包含代码的<script>标记放在</form>标记之后你的表格虽然没有必要。

如果你真的想要一个简单的JS解决方案，试试这个：

function Validate() {
    var container = document.getElementById('filters');
    var checked = 0;
    for(var i = 0; i < container.childNodes.length; i++) {
        var elem = container.childNodes[i];
        if(elem.tagName == 'INPUT' && elem.type == 'checkbox' && elem.checked) {
            checked++;
        }
    };
    if(checked) {
        return true;
    }
    alert('Please select at least one filter.');
    return false;
}

使用Javascript使用复选框验证表单

1 个答案: