我有按钮,我转换为复选框。点击按钮我只需将图标更改为复选标记和背景。我在按钮标签后面有一个隐藏的复选框,当按钮被点击时它会更新。
我面临的问题是当我点击“全选”时,该元素的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: 我忘了提到除了选择所有复选框之外的所有复选框,都会在加载网站后添加到页面中。所以我相信我必须使用$(文件)。
答案 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');