html - 勾选 5x 复选框后显示按钮

Question

我有使用 css sprite 的复选框列表。复选框很好，但我希望这样，当用户选中所有复选框时，它会（并且仅在那时）在页面底部显示一个按钮。

任何帮助将不胜感激。

我有 jfiddle 但没有得到全部 - 必须附有代码吗？

泰

Answer 1

您可能会看到，使用选择器 ~，输入检查不需要连续。例如，它可能只是十分之五。分叉的jsfiddle：http: //jsfiddle.net/GCyrillus/sqRaG/

.checkbox:checked ~ .checkbox:checked ~.checkbox:checked ~ .checkbox:checked~ .checkbox:checked ~ #the-button {
    display: block;
}

Answer 2

理论上，这可以通过使用:checked选择器与+兄弟选择器结合使用仅 css 来完成。CSS看起来像这样：

.checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + #the-button {
    display: block;
}

理论上这应该可行，但是当我在 jsFiddle 中尝试它时，它的行为有点奇怪。无论如何，我认为这不是一个非常可行的解决方案，因为它很难调试并且需要您的 html 具有某种无法更改的结构。

在现实生活中，这将通过几行 jQuery 来完成。我想出的代码如下所示：

// cache he collection of checkboxes
var $checkboxes = $('#js-solution .checkbox');
// when a checkbox changes
$checkboxes.change(function() {
    // filter out the ones that are checked
    var $checked = $checkboxes.filter(':checked');
    // if the number of checked ones is 5
    if ($checked.length == 5) {
        // show the button
       $('#the-js-button').css('display', 'block');
    // if the number of checked ones is not 5
    } else {
        // hide the button
        $('#the-js-button').css('display', 'none');
    }
});

这些评论应该足以让您了解发生了什么，但请随时提问。

我把这两个解决方案放在一起放在这个小提琴中：http: //jsfiddle.net/7GN7q/1/
css 解决方案对我不起作用，但我认为这是 Chrome 的东西，因为我看不到是什么无效，在检查样式时确实会应用，并且display:block在检查器中取消检查和检查确实可以使其正常工作。在现实生活中，无论如何我都会选择 js 解决方案。