Question

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

非常感谢任何帮助。

我有jfiddle，但没有得到整体 - 必须伴随代码？

TY

Answer 1

理论上，这可以仅使用css，使用:checked选择器与+兄弟选择器结合使用。 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解决方案。

Answer 2

你可以看到，使用选择器〜，检查输入不需要连续。例如，它可以是十分之五。 forked jsfiddle：http://jsfiddle.net/GCyrillus/sqRaG/

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

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

2 个答案: