0

我有一组复选框，格式如下：

<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>

我想用ValidateJavascript 编写一个函数来查看是否选中了 div id 中的任何复选框 filters。如果它们都没有被选中，它应该显示一个警告框并防止 cgi 被执行。div 中的复选框的filters名称都以 结尾_f，如果有帮助的话。我该如何编写这样的函数？

4

1 回答 1

3

这是一个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;
}
于 2012-06-02T11:23:57.320 回答