全选-点击事件干扰功能

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/

当我点击"全选"时，我希望复选标记和背景颜色也能切换。目前它没有改变，但其他一切都按照它应该的方式进行

非常感谢您调查这个问题和我的问题！我真的很感激任何帮助。

第1版：我忘了提到，除了全选之外的所有复选框都会在网站加载后添加到页面中。所以我认为我必须使用$(文档)。

Answer 1

问题是在切换select all的按钮/复选框后，您可以在下面的循环中重新切换它们

$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/