5 배 체크 박스가 체크 된 후 표시 버튼

Question

나는 css 스프라이트를 사용하는 체크 박스 목록을 가지고있다. 확인란은 괜찮지 만 사용자가 모든 확인란을 선택하면 페이지 하단에 단추가 표시됩니다.

도움을 주시면 감사하겠습니다.

나는 jfiddle을 가지고 있지만 전체를 얻지는 않는다 - 코드를 수반해야 하는가?

TY

Answer 1

은 이론적으로 이것은 + 형제 선택기와 함께 상기 :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의 솔루션은 나를 위해 작동하지 않습니다,하지만 난 검사 반면에, 무효 무엇인지 표시되지 않습니다 원인, 그것은 크롬의 일이 생각 스타일이 적용되지 않습니다. 검사기에서 display:block의 선택을 취소하면 제대로 작동합니다. 실생활에서 나는 어쨌든 js 해결책을 갈 것이다.

Answer 2

선택기 ~을 사용하면 선택 입력이 연속적 일 필요는 없습니다. 예를 들어 10 개 중에 5 개가 될 수 있습니다. forked jsfiddle : http://jsfiddle.net/GCyrillus/sqRaG/

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