jQuery 필터 확인란 (확인란 별)

Question

확인란을 사용하여 표를 필터링 할 수 있기를 원합니다. 그러나 이것은 작동하지 않는 것 같습니다.

Basiclly 체크되지 않은 테이블을 숨기고 테이블을 표시하고 싶습니다. 내가 뭔가 잘못하고있는 중이 야 경우 HTML 코드

<div class="tags"> 
    <label><input type="checkbox" rel="a" /> a </label> 
    <label><input type="checkbox" rel="x" /> x </label> 

</div> 

<table> 
    <thead> 
     <tr><th>list</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>a</td></tr> 
     <tr><td>a</td></tr> 
     <tr><td>b</td></tr> 
     <tr><td>a</td></tr> 
     <tr><td>x</td></tr> 

    </tbody> 
</table> 

JS 코드

$('div.tags').delegate('input:checkbox', 'change', function() 
{ 
    var $lis = $('table tbody > tr').hide(); 
    //For each one checked 
    $('input:checked').each(function() 
    { 
      $lis.filter('.' + $(this)).show(); 
    });  
}).find('input:checkbox').change(); 

오전 궁금해?

Answer 1

여기에 작동하고 HTML과 자바 스크립트 (모두 수정 된) :

<div class="tags"> 
    <label><input type="checkbox" rel="a" /> a </label> 
    <label><input type="checkbox" rel="x" /> x </label> 
</div> 

<table> 
    <thead> 
     <tr><th>list</th></tr> 
    </thead> 
    <tbody> 
     <tr class="a"><td>a</td></tr> 
     <tr class="a"><td>a</td></tr> 
     <tr class="b"><td>b</td></tr> 
     <tr class="a"><td>a</td></tr> 
     <tr class="x"><td>x</td></tr> 
    </tbody> 
</table> 

...

var updateRows = function() 
{ 
    // Get ones to show 
    var toShow = []; 
    $('div.tags input[type=checkbox]:checked').each(function(){ 
     var box = $(this); 
     toShow.push('.' + box.attr('rel')); 
    }); 
    toShow = toShow.join(', '); 

    // Filter rows 
    $('table > tbody > tr').each(function() { 
     var row = $(this); 
     row.toggle(row.is(toShow)); 
    }); 
}; 
$('div.tags input[type=checkbox]').click(updateRows); 
updateRows(); 

HTH는

Answer 2

delegate의 선택자는 지금까지 선택된 요소에서 필터 역할을합니다. find처럼 작동하지 않습니다. 선택한 요소 내에 포함 된 요소를 찾습니다. 즉, 필터 선택기가 지금까지 선택된 요소와 일치하지 않으므로 변경 기능이 아무 것도 적용되지 않습니다. HTML을 사용하면 위임 된 핸들러를 사용하지 않고 훨씬 간단하게 만들 수 있습니다.

또한 처리기가 클래스 선택기를 사용하여 표시 할 행을 선택하려고하지만 행에 내용으로 값이있는 클래스가 없습니다. 행에 적절한 클래스를 지정하거나 행을 선택하는 f}을 변경해야합니다.

$('div.tags input:checkbox').change(function() 
{ 
    var selection = $(this).val(); 
    var $lis = $('table tbody > tr').hide(); 
    //For each one checked 
    $('input:checked').each(function() 
    { 
      $lis.filter(function() { return $(this).text() == selection; }).show(); 
    });  
});