다중 선택이있는 jQuery 선택 상자 선택

Question

2 개 이상의 확인란을 선택할 때 jQuery 선택란 선택에 문제가 있습니다. 나는 여전히 프론트 엔드 프로그래밍에 익숙하다. 그래서 나와 함께 견뎌야한다. 내가 처음 확인란을 선택하고 추가로 두 번째 체크 박스는 두 번째 선택을 제외한 모든 선택을 제공 할 때

1) : 여러 선택 사항을 선택할 때 하나 개의 체크 박스에

선택/선택 해제가 잘 작동하지만 문제가있다.

2) 첫 번째 확인란을 선택하여 두 번째 확인란을 선택 취소하면 모든 선택 항목이 표시됩니다.

제대로 입력하고 올바른 필터링 된 선택 항목을 제공하기 위해 두 번 상자를 선택해야하는 것 같습니다. 여기

코드 : JSFiddle

HTML은

<div class="tags"> 
<label> 
    <input type="checkbox" rel="accounting" />Accounting</label> 
<label> 
    <input type="checkbox" rel="courier" />Courier</label> 
<label> 
    <input type="checkbox" rel="project-management" />Project Management</label> 
<label> 
    <input type="checkbox" rel="video-games" />Video Games</label> 
</div> 
<ul class="results"> 
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a></li> 
<li class="courier" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Courier</a></li> 
<li class="project-management" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Project Management</a></li> 
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a></li> 
</ul> 

jQuery를이

$(document).ready(function() { 
$('div.tags').find('input:checkbox').live('click', function() { 
    if ($(this).prop("checked")) { 
     $('.results > li').toggle('show'); 
     $('div.tags').find('input:checked').each(function() { 
      $('.results > li.' + $(this).attr('rel')).toggle('show'); 
     }); 
    } else{ 
     $('.results > li').show(); 
    } 
}); 
}); 

Answer 1

이것은 당신이 무엇을해야 할 것 같다

$('div.tags').find('input:checkbox').on('click', function() { 
    var vals = $('input:checkbox:checked').map(function() { 
     return $(this).attr('rel'); 
    }).get(); 
    $('li').hide().filter(function() { 
     return ($.inArray($(this).attr('class'), vals) > -1) 
    }).show() 
    if ($('input:checkbox:checked').length == 0) $('li').show() 
}); 

jsFiddle example