Jquery 切换所有未按预期工作的开关

Jquery 切换所有未按预期工作的开关,jquery,datatables,toggle,Jquery,Datatables,Toggle,我试图在主开关上实现一个全切换,但它没有按预期工作。我有数据表,我正在使用此代码隐藏/显示列: $('.toggle vis')。打开('click',函数(){ var column=table.column($(this.attr('data-column')); column.visible(!column.visible()); }); 通过执行以下操作,我在主开关上实现了“全部切换”: $(“#开关切换全部[数据切换全部])。单击(函数(){ $(“#开关切换所有输入[type=“c

我试图在主开关上实现一个全切换,但它没有按预期工作。我有数据表,我正在使用此代码隐藏/显示列:

$('.toggle vis')。打开('click',函数(){
var column=table.column($(this.attr('data-column'));
column.visible(!column.visible());
});
通过执行以下操作,我在主开关上实现了“全部切换”:

$(“#开关切换全部[数据切换全部])。单击(函数(){
$(“#开关切换所有输入[type=“checkbox”]”).prop('checked',this.checked);
});
现在,为了在切换时隐藏列,我尝试合并这两个代码,但结果不是我所期望的:

$(“#开关切换全部[数据切换全部])。单击(函数(){
$(“#开关切换所有输入[type=“checkbox”]”).prop('checked',this.checked);
$('.toggle-vis')。打开('click',函数(){
//var column=table.column($(this.attr('data-column'));
if($('#开关切换所有输入[type=“checkbox”]”)是(':checked')){
//$(this.prop('checked',true);
console.log('show');
table.column($(this.attr('data-column')).visible(true);
}
if($('#开关切换所有输入[type=“checkbox”]”)是(':not(:checked)')){
//$(this.prop('checked',false);
console.log('hide');
table.column($(this.attr('data-column')).visible(false);
}
});
});
问题:

  • 当隐藏/显示单个列时,它会返回一个循环
  • 切换所有工作,但不隐藏列
这里的代码片段有点大,所以我做了一个小例子

编辑[0]:

我举了一个更好的例子,我把这个片段带到这里:

$(文档).ready(函数(){
变量表=$(“#示例”).DataTable();
$('.toggle vis')。打开('单击',函数(){
var column=table.column($(this.attr('data-column'));
column.visible(!column.visible());
});
$('.switch toggle all[数据切换全部])。单击(函数(){
$('.switch切换所有输入[type=“checkbox”]').prop('checked',this.checked);
var status=$('.switch toggle all input[type=“checkbox”]')。is(':checked');//获取复选框的状态
//循环检查其他复选框
$(“.toggle-vis”).each(函数(){
//获取atr值并使用该值隐藏/显示
table.column($(this.attr('data-column')).visible(status);
});
});
});
正文{
字体:12px“Helvetica Neue”,HelveticaNeue,Verdana,Arial,Helvetica,无衬线;
保证金:0;
填充:0;
颜色:#333;
背景色:#fff;
}
div.dataTables_长度,
div.dataTables\u过滤器,
div.dataTables\u info,
div.dataTables_paginate{
显示:无;
}

名称
位置
办公室
年龄
薪水
开始日期
名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$3,120
加勒特温特斯
经理
爱丁堡
63
2011/07/25
$5,300
阿什顿考克斯
技术作者
旧金山
66
2009/01/12
$4,800
塞德里克·凯利
Javascript开发人员
爱丁堡
22
2012/03/29
$3,600
詹娜·艾略特
财务总监
爱丁堡
33
2008/11/28
$5,300
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$4,525
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$4,080
罗娜·戴维森
集成专家
爱丁堡
55
2010/10/14
$6,730
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$5,000
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$3,600
杰娜·盖恩斯
系统架构师
伦敦
30
2008/12/19
$5,000
奎因·弗林
财务总监
爱丁堡
22
2013/03/03
$4,200
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$5,300
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$4,800
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$2,875
迈克尔·席尔瓦
高级市场设计师
伦敦
66
2012/11/27
$3,750
柏德
Javascript开发人员
纽约
64
2010/06/09
$5,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$3,120
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$3,120
戴里奥斯
系统架构师
爱丁堡
35
2012/09/26
$4,200
杰内特·考德威尔
财务总监
纽约
30
2011/09/03
$4,965
尤里浆果
系统架构师
纽约
40
2009/06/25
$3,6