javascript - 全选 - 单击事件干扰功能

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:我忘了提及，除了全选之外的所有复选框都会在站点加载后添加到页面中。所以我相信我必须使用 $(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/