すべてのクリックイベントを選択して機能を妨害します

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'); 

     }); 
    } 
}); 

これは明らかに多くのコードのように見えます何が起こっているのか理解するhttps://jsfiddle.net/gj6bmt93/1/

[すべてを選択]をクリックすると、そのチェックマークと背景色を切り替えることもできます。現時点では変わらないが、それ以外のものはそれが想定している通りに機能する。

この問題と私の質問を調べてくれてありがとう！私は本当にどんな助けにも感謝します。

edit1： サイトがロードされた後、すべて選択する以外のすべてのチェックボックスがページに追加されることを忘れていました。だから私は$（文書）を使わなければならないと信じています。

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) 
}); 

下回る最後の2行がすべて選択を含むすべてのチェックボックスの状態を再切り替えます選択のボタン/チェックボックスをトグルした後でボタン/チェックボックス

単にチェックボックス反復の開始前に2つの行を削除し、ループハンドルが

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

すべてのボタン/チェックボックスをチェックし、オフにしましょう10

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