테이블 행의 확인란으로 fontawesome 사용

Question

각 행마다 확인란이있는 표가 있습니다. 내 테이블에 Bootstrap 3을 사용하고 내 확인란에 Font Awesome 아이콘을 사용하고 있습니다.

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th><i type="checkbox" class="icon-check-empty" id="selectall"></i></th> 
      <th>Name</th> 
      <th>Age</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><i type="checkbox" class="icon-check-empty option"></i></td> 
      <td><a href="#">Anna</a></td> 
      <td>15</td> 
     </tr> 
     <tr> 
      <td><i type="checkbox" class="icon-check-empty option"></i></td> 
      <td><a href="#">John</a></td> 
      <td>18</td> 
     </tr> 
    </tbody> 
</table> 

이것은 글꼴 썸네일 아이콘을 체크 박스로 사용할 수있게 해주는 코드입니다.

$('i').click(function(){ 
     if($(this).hasClass('icon-check')) { 
      $(this).removeClass('icon-check').addClass('icon-check-empty'); 
     } else { 
      $(this).removeClass('icon-check-empty').addClass('icon-check'); 
     } 
}); 

이 코드는 모든 체크 박스를 선택하는 데 사용됩니다.

$(function() { 
    $("#selectall").click(function() { 
     $('[class*="option"]').prop("checked", this.checked); 
    }); 
    $('[class*="option"]').click(function() { 
     if ($('[class*="option"]').length == $('[class*="option"]:checked').length) { 
      $("#selectall").prop("checked", true); 
     } else { 
      $("#selectall").prop("checked", false); 
     } 
    }); 
}); 

사용자 정의 체크 박스를 사용하지 않을 때 ^이 잘 작동합니다. 그러나 Font Awesome의 아이콘을 사용하고 싶습니다.

Answer 1

#selectall 요소가 클릭되었는지 확인할 수 있으며, 그렇다면 다른 요소를 모두 선택/선택 해제하십시오.

코드 :

$(document).ready(function() { 
    $('i').not('#selectall').click(function() { 
     if ($(this).hasClass('icon-check')) { 
      $(this).removeClass('icon-check').addClass('icon-check-empty'); 
     } else { 
      $(this).removeClass('icon-check-empty').addClass('icon-check'); 
     } 
    }); 

    $("#selectall").click(function() { 
     if ($(this).hasClass('icon-check')) { 
      $('i').removeClass('icon-check').addClass('icon-check-empty'); 
     } else { 
      $('i').removeClass('icon-check-empty').addClass('icon-check'); 
     } 
    }); 

}); 

당신의 CSS에 추가해야합니다 :

i { 
    display: inline-block 
} 

또는 선택이 비어 <i> 태그 요소에 이벤트를 발생합니다.

데모 : http://jsfiddle.net/IrvinDominin/zx4pq/