Checkbox 값에 함수를 실행 하시겠습니까?

Question

사용자가 페이지에서 체크 한 체크 박스의 수를 기준으로 결과를 업데이트하려고했습니다.

사용자가 5 개 이상을 선택하면 2 개의 div가 사라집니다.

사용자가 10 개 이상을 선택하면 다른 두 div가 사라집니다.

사용자가 10 개 이상을 선택하면 다른 세트가 사라집니다.

실행할 첫 번째 함수를 얻을 수 있지만 첫 번째 if 문이 완료되었으므로 업데이트/값 변경을 찾지 못했다고 생각합니까? 나머지는 100 % 불투명도로 사라지지 않습니다.

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked > 5) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
    else if (boxChecked > 10) { 
     $('.div-1, .div-3').fadeTo(500, 0.4) 
    } 
    else if (boxChecked > 11) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
}); 

Answer 1

if/else 문 조건에 대한 범위를 설정하거나 코드가 올바르게 작동하도록 if 문을 사용해야합니다.

예를 들어 길이가 5보다 큰 경우 첫 번째 분기가 수행됩니다.

그러나 두 번째 분기는 길이가 10보다 큰지 확인하지만 첫 번째 조건도 참이므로이 문에 도달하지 않습니다. 추가 된 jsfiddle을하고 버그를 수정 - 조건이 충족되지 않을 때 div의를 재설정하기 위해 다른 추가 :

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked === 2) { 
     $('.div-1, .div-2').fadeTo(500, 0.4); 
    } 
    else if (boxChecked > 3 && boxChecked <5) { 
     $('.div-1, .div-3').fadeTo(500, 0.4); 
    } 
    else if (boxChecked > 4) { 
     $('.div-1, .div-2').fadeTo(500, 0.4); 
    } 
    else { 
     $('.div-1, .div-2, .div-3').fadeTo(500,1); 
    } 
}); 

편집 :

당신은 이런 식으로 뭔가를 시도 할 수 있습니다. JSFiddle : http://jsfiddle.net/148cL5rc/1/

Answer 2

if 문을 뒤집습니다. > 5는 5보다 커질 때 항상 true가 될 것이므로 더 높은 숫자로 확인하고 숫자를 줄이려면 노력하십시오.

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked > 11) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } else if (boxChecked > 10) { 
     $('.div-1, .div-3').fadeTo(500, 0.4) 
    } else if (boxChecked > 5) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
});