Кнопка дисплея после отметок 5x отмечена галочкой

Question

У меня есть список флажков с помощью css спрайта. Флажки в порядке, но я бы хотел, чтобы, когда пользователи проверили все флажки, он (и только тогда) отобразит кнопку внизу страницы.

Любая помощь была бы принята с благодарностью.

У меня есть 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

Вы также можете видеть, что с селектором ~ входной флажок не обязательно должен быть в строке. Это может быть только 5 из десяти, например. forked jsfiddle: http://jsfiddle.net/GCyrillus/sqRaG/

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