Jquery - onclick 및 onload로 표시 결과 필터링

Question

여러 라디오 버튼과 목록 항목 목록 (ul/li)이있는 페이지가 있습니다. 처음 페이지에 오면 전체 목록이 표시됩니다. 라디오를 확인하면 목록의 범위가 좁혀집니다.

일부 jquery 코드가 발견되어 잘 작동합니다. 내가 원했던 것/찾지 못했던 것 (현재의 필터링에 추가)은 페이지가로드 될 때 (아직 클릭하지 않음) 필터링을 시작하여 미리 정의 된/사전 검사 된 라디오가있는 경우 (예 : 아래의 첫 번째 라디오) 목록은 이미 필터링 된 것이고 전체 목록은 아닙니다.

도움 주셔서 감사합니다. http://jsfiddle.net/3NdHt/

<div class="tags"> 
<label><input type="radio" rel="apac" name="geo" checked /> APAC</label> 
<label><input type="radio" rel="emea" name="geo" /> EMEA</label> 
<label><input type="radio" rel="east" name="geo" /> US East</label> 
<label><input type="radio" rel="west" name="geo" /> US West</label> 
</div> 
<br /> 

<ul class="results"> 
<li class="apac">APAC 1</li> 
<li class="apac">APAC 1</li>  
<li class="emea">EMEA </li> 
<li class="west east">WEST EAST 1</li> 
<li class="west">WEST 2</li>  
<li class="east">EAST</li>  
</ul>  

JQuery와 : 여기 jsfiddle에 링크의

$(document).ready(function() { 
$('div.tags').delegate('input[type=radio]', 'change', function() { 
    var $lis = $('.results > li'), 
    $checked = $('input:checked'); 
    if ($checked.length) { 
    var selector = $checked.map(function(){ 
     return '.' + $(this).attr('rel'); 
    }).get().join(''); 
     $lis.hide().filter(selector).show(); 
    } else { 
    $lis.show(); 
} 
}); 
}); 

Answer 1

가 위임 변경 이벤트에서 기능을 당겨은 (BTW 대신 .delegate()의 .on()를 사용한다) 한 후 바로 준비 문서에 전화 .

jsFiddle example

$('div.tags').delegate('input[type=radio]', 'change', update); 
update(); // THIS CALLS THE FUNCTION ON DOC READY 

function update() { 
    var $lis = $('.results > li'), 
     $checked = $('input:checked'); 
    if ($checked.length) { 
     var selector = $checked.map(function() { 
      return '.' + $(this).attr('rel'); 
     }).get().join(''); 

     $lis.hide().filter(selector).show(); 

    } else { 
     $lis.show(); 
    } 
}