jQuery - 按可见性过滤，如果选中

Posted 2023-03-05

【中文标题】jQuery - 按可见性过滤，如果选中

【英文标题】：jQuery - filter by visibility, and if checked

【发布时间】：2012-05-11 18:16:27

【问题描述】：

我有一些使用可见性属性显示/隐藏复选框的代码。如果按钮是可见的，则在提交表单时，我需要以某种方式确保确实选中了 所有 可见复选框。

这是我目前的尝试：

$("form").submit(function() 
    if ($(':checkbox:visible:not(:checked)').filter(function() 
    return $(this).css('visibility') != 'hidden';
    ).length) 
        alert('return false');
    
);

问题似乎是过滤器后的$(this)是表单而不是复选框。

任何建议都非常受欢迎，比你更受欢迎！

【问题讨论】：

在您的代码中，this 指的是表单，这就是它不起作用的原因。

【参考方案1】：

这个怎么样：http://jsfiddle.net/zerkms/WUGh3/1/

if ($('.checkbox:visible:not(:checked)').length) 
    alert('not all visible checkboxes are checked');
    return false;

​因此您只需检查是否有任何未选中的可见复选框。如果是这样 - 返回false

PS：正如@bažmegakapa 所建议的那样，更有效的写作方式是：

if ($('.checkbox:not(:checked)').filter(':visible').length) 
    alert('not all visible checkboxes are checked');
    return false;

【讨论】：

非常感谢，尽管不幸的是，即使我检查了所有可见的复选框，它仍然返回 false

@Nick：它对我有用——请拿走我的 jsfiddle 并修改 html 部分，这样 js 就会失败：jsfiddle.net/zerkms/WUGh3/2jsfiddle.net/zerkms/WUGh3/3

可能值得将:visible 移出查询选择器。

@bažmegakapa：无论如何它不会改变行为，但确实可能对性能有用

@zerkms 可能是错误的，但是可以使用本机 DOM querySelectorAll() 而不是触发 jQuery 的引擎。详情见我的回答。

【参考方案2】：

在您的解决方案中，this 指的是表单本身，而is() 仅在一个元素上运行，即 jQuery 集合中的第一个元素，因此您应该采用不同的方法。

在这个紧凑的情况下，你只需过滤可见的，然后过滤没有检查的，如果有，则返回 false（最后返回的是 == 运算符的结果） .

$("form").submit(function() 
    return $('.checkbox').filter(':visible').not(':checked').length == 0;
);

jsFiddle Demo

注意：相比@zerkms 的解决方案，我基本上是把选择器打散了。 :visible 不是一个可以使用本地浏览器选择器引擎（如果可用）的选择器（请参阅Additional Notes in the manual）。

【讨论】：

非常感谢，我想我可能需要更改我的代码，因为 :visible 似乎不适用于 css("visibility":"hidden");

【参考方案3】：

这一行：

$('.checkbox').filter(':visible')

检查是否有任何可见的带有checkbox类的复选框。

然后您检查 form 对象以查看它是否已检查，这不是因为无法检查表单。

你可能想做这样的事情：

var checkBoxes = $('.checkbox').filter(':visible');
var returnValue = true;

// Check if each visible checkbox is checked
checkBoxes.each(function()
    if(! $(this).is(':checked'))
    
      returnValue = false;
    
);

return returnValue;

Here's a working demo for you

【参考方案4】：

据我所知，$(this) 指的是表单，而不是复选框。