选择全部 - 单击事件会干扰函数

时间:2017-02-04 09:51:27

标签: javascript jquery

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

我面临的问题是当我点击“全选”时,该元素的btn和icon类不会切换。

解释起来有点复杂,在演示时会更容易理解这个问题:

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

1 个答案:

答案 0 :(得分: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/