toggle font awesome not working

Question

Я пытаюсь получить значком fontavesome для переключения, когда столбец скрыт. По иронии судьбы, это работает, когда я предупреждаю строку, но предупреждение происходит дважды, а во втором предупреждении значок переключается обратно в исходное состояние. Я не слишком беспокоюсь о бдительности, потому что мы не будем там. Но я подумал, что это странно. Вот что у меня есть ...

HTML-

<div id="user-options"> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_1" checked="checked" /><i class="fa fa-toggle-on"></i> First Name</label></p> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_2" /><i class="fa fa-toggle-off"></i> Last Name</label></p> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_3" checked="checked" /><i class="fa fa-toggle-on"></i> Email</label></p> 
    </div> 

    <table id="report"> 
     <thead> 
      <tr> 
       <th class="col_1">First Name</th> 
       <th class="col_2">Last Name</th> 
       <th class="col_3">Email</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="col_1">Kevin</td> 
       <td class="col_2">Smith</td> 
       <td class="col_3">kevin@gmail.com</td> 
      </tr> 
      <tr> 
       <td class="col_1">Jim</td> 
       <td class="col_2">James</td> 
       <td class="col_3">John@gmail.com</td> 
      </tr> 
     </tbody> 
    </table> 

And The Javascript

$("input:checkbox:not(:checked)").each(function() { 
     var column = "#report ." + $(this).attr("name"); 
     $(column).hide(); 
     }); 
    $("input:checkbox").click(function(){ 
     var column = "#report ." + $(this).attr("name"); 
     $(column).toggle(); 
     }); 


    $('label.links').click(function(){ 
    $(this).find('i.fa').toggleClass('fa-toggle-on fa-toggle-off'); 
    }); 

Toggling колонны работает нормально, но переключая иконки не делает. Я попытался поместить класс toggle внутри функции щелчка флажков. Спасибо за любую помощь, которую любой может мне дать. Я работаю над этим весь день и никуда не уйду.

Answer 1

Пожалуйста, проверьте эту рабочую демонстрационную версию: JSFiddle.

Просто поместите значок переключая код в случае input клик:

$("input:checkbox").click(function() { 
    var column = "#report ." + $(this).attr("name"); 
    $(this).next('i.fa').toggleClass('fa-toggle-on fa-toggle-off'); 
    $(column).toggle(); 
}); 

==========================

UPDATE:

Если вы будете придерживаться оригинального решения, проверить это: JSFiddle.

Ваш код не работает, потому что событие click захватывается и размножается дважды. Просто прекратите распространение:

$("input:checkbox").click(function(e) { 
    var column = "#report ." + $(this).attr("name"); 
    $(column).toggle(); 
    e.stopPropagation(); 
});