2010-08-16 3 views
0

나는 체크 박스와 jquery를 사용하여 내용을 동적으로 필터링하려고한다.확인란을 사용하여 콘텐츠를 동적으로 필터링하는 방법은 무엇입니까? - jQuery

jquery를 처음 사용하는 사람이라면이 작업을 올바르게 수행하는 방법에 대한 확신이 없기 때문에 도움이된다면 도움이 될 것입니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript" > 
     $(document).ready(function(){ 
      $("#test").change(function() 
      {  
       if ($(this).is(":checked")) 
       { 
         $("#example").hide(); 

       }else{ 
         $("#example").show(); 
       } 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <input type="checkbox" id="test"/> 
    <input type="checkbox" id="test2"/> 

    <div id="example">Example</div> 
    <div id="example2">Example2</div> 
</body> 
</html> 

내가에만 작동하는, 위와 같이 하드 코드에 ID를에없는 것을 의미한다, 모두 체크 박스를 동적으로 작동 할 수 있도록 그것을 만들려고 노력하고 있어요 :

나는이 코드를 가지고있다 첫 번째 확인란. 그래서 여러 가지 확인란을 사용하여이 작업을 수행하는 방법을 궁금해하고 싶습니다. ID를 확인하고 어떻게 든 삽입합니까?

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

답변

1

나는 당신의 체크 박스 같은 클래스 줄 수 : 바인딩 할 때

<input type="checkbox" id="test" class="cb" /> 
<input type="checkbox" id="test2" class="cb"/> 

<div id="example">Example</div> 
<div id="example2">Example2</div>​​​​​​​​​​​​​​​​ 

사용 그와 같이, 즉석에서 ID를 얻을 : 대신 쇼,

$(document).ready(function(){ 
    $(".cb").change(function() {  
    $("#" + this.id.replace('test', 'example')).toggle(this.checked); 
    }).change(); //match the initial show/hide match 
});​ 

You can give it a try here를/이것을 숨기려면 .toggle(bool)을 사용하고 ID를 변환하여 testexample으로 바꾸고 그 요소를 가져 와서 일치하는 <div> 요소를 선택합니다.

관련 문제