全选 - 单击事件干扰功能

Question

我有按钮，我转换为复选框。点击按钮，我只需将图标更改为复选标记和背景。我有一个隐藏的复选框，紧跟着按钮标签，当按钮被点击时它会被更新。

我面对的问题是，当我点击“全选”时，该元素的btn和图标类不会切换。

这有些复杂，解释，这个问题是一个容易得多时表现出理解：

<span class="button-checkbox"> 
    <button id="select-all" type="button" class="btn btn-sm btn-default"><i class="state-icon fa fa-square-o"></i> Select all?</button> 
    <input type="checkbox" /> 
</span> 

<br> 

<span class="button-checkbox"> 
    <button type="button" class="btn btn-sm btn-default btn-private"><i class="state-icon fa fa-square-o"></i></button> 
    <input name="{%=file.name%}" type="checkbox" /> 
</span> 

<span class="button-checkbox"> 
    <button type="button" class="btn btn-sm btn-default btn-private"><i class="state-icon fa fa-square-o"></i></button> 
    <input name="{%=file.name%}" type="checkbox" /> 
</span> 

，这是jQuery代码：

$(document).on('click', '.btn-private', function(event) { 
    var $btn = $(this); 
    var $span = $btn.closest('.button-checkbox'); // find the span that surrounds the button/icon/input 
    var $icon = $btn.find('.state-icon'); // find the icon 
    var $checkbox = $span.find('input'); 
    var wasChecked = $checkbox.prop('checked'); 
    $icon.toggleClass('fa-square-o fa-check-square-o'); 
    $btn.toggleClass('btn-default btn-white'); 
    $checkbox.prop('checked', !wasChecked); 
}); 

// Listen for click on toggle checkbox 
$(document).on('click', '#select-all', function(event) { 

    var $btn = $(this); 
    var $span = $btn.closest('.button-checkbox'); // find the span that surrounds the button/icon/input 
    var $icon = $btn.find('.state-icon'); // find the icon 
    var $checkbox = $span.find('input'); 
    var wasChecked = $checkbox.prop('checked'); 

    $icon.toggleClass('fa-square-o fa-check-square-o'); 
    $btn.toggleClass('btn-default btn-white'); 

    $checkbox.prop('checked', !wasChecked); 
    if(!wasChecked) { 
     // Iterate each checkbox 
     $(':checkbox').each(function() { 
      this.checked = true; 
      var $btn = $(this).prev(); 
      var $icon = $btn.find('.state-icon'); 
      $btn.toggleClass('btn-default btn-white'); 
      $icon.toggleClass('fa-square-o fa-check-square-o'); 
     }); 
    } 
    else { 
     $(':checkbox').each(function() { 
      this.checked = false; 
      var $btn = $(this).prev(); 
      var $icon = $btn.find('.state-icon'); 
      $btn.toggleClass('btn-white btn-default'); 
      $icon.toggleClass('fa-check-square-o fa-square-o'); 

     }); 
    } 
}); 

显然，这看起来像一个大量的代码了解发生了什么。我在这里创建了一个jsfiddle：https://jsfiddle.net/gj6bmt93/1/

当我点击“全选”时，我希望该选中标记和背景颜色也被切换。目前它不会改变，但其他一切都按照它应有的方式运作。

非常感谢您关注我的问题和问题！我真的很感谢任何帮助。

edit1： 我忘了提及所有复选框，而不是选择全部，在网站加载后被添加到页面。所以我相信我必须使用$（document）。

Answer 1

问题是切换的选择所有的按钮/复选框，然后你再拨动他们在环路下方

$icon.toggleClass('fa-square-o fa-check-square-o'); //<---- Select all toggled here 
$btn.toggleClass('btn-default btn-white'); //<---- Select all toggled here 

// Iterate each checkbox 
$(':checkbox').each(function() { 
    this.checked = true; 
    var $btn = $(this).prev(); 
    var $icon = $btn.find('.state-icon'); 
    $btn.toggleClass('btn-default btn-white');<---- // All buttons(including select all re-toggled here) 
    $icon.toggleClass('fa-square-o fa-check-square-o');<---- // All checkboxes(including select all re-toggled here) 
}); 

最后两行之后再切换所有的复选框的状态，包括全选按钮/复选框

复选框迭代开始前，只需删除两条线，让环形手柄检查和取消选中所有按钮/复选框

//$icon.toggleClass('fa-square-o fa-check-square-o'); 
//$btn.toggleClass('btn-default btn-white'); 

https://jsfiddle.net/gj6bmt93/3/