使用复选框更改表中显示的列

Question

我有一个可以显示一组列的表格（实际上是一个网格），用户可以使用复选框列表选择要显示的列。我必须插入一个全选/取消全选按钮。

$('#CheckUncheck').toggle(function(){
    $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked')
    $("#CheckBoxDiv input[type='checkbox']").trigger('click');
    $(this).val('Check All')
},function(){
    $("#CheckBoxDiv input[type='checkbox']").attr('checked', 'checked').trigger('click');
    $(this).val('Uncheck all');        
});

现在，当我第一次单击“取消选中全部”按钮时，这些框不会被取消选中，但之后可以正常工作。为了更好地理解，我附上了一个小提琴。

我做错了什么？ 另外，我是否以有效的方式触发了更改功能？

JSFiddle：DEMO

Answer 1

这里是 NEW DEMO LINK 看看它......这是你想要的......但是对于它你必须看看复选框是否默认选中......

我已经改变了你的html，只是在按钮上添加了data-id属性

<div id="ButtonDiv">
  <input type="button" id="CheckUncheck" data-id="uncheck" value="Uncheck All"/>

<div id="CheckBoxDiv">
<input type="checkbox" id="cb1"  value="Cell1" /> Checkbox 1
<input type="checkbox" id="cb2"  value="Cell2" /> Checkbox 2
<input type="checkbox" id="cb3" checked="checked" value="Cell3" /> Checkbox 3
<input type="checkbox" id="cb4" checked="checked" value="Cell4" /> Checkbox 4
</div>

<div>
<table id="table">
    <tr id="row">
        <td id="Cell1">1</td>
        <td id="Cell2">2</td>
        <td id="Cell3">3</td>
        <td id="Cell4">4</td>
    </tr>
</table>
</div>

还有新的javascript

 $(document).ready(function(){ 
alert($("#CheckBoxDiv input[type='checkbox']").length+'========'+$("#CheckBoxDiv input[type='checkbox']:checked").length);

if($("#CheckBoxDiv input[type='checkbox']").length == $("#CheckBoxDiv input[type='checkbox']:checked").length)
{
    $('#CheckUncheck').attr('Value','Uncheck All');
     $('#CheckUncheck').attr('data-id','uncheck');
}
else
{
    $('#CheckUncheck').attr('Value','Check All');
     $('#CheckUncheck').attr('data-id','check');
}

$("#CheckBoxDiv input[type='checkbox']").click(function () {
    var cbValue = $(this).val();
    if ($(this).attr('checked')) {
            $(cbValue).show();
        }
        else {
            $(cbValue).hide();
        }
});

$('#CheckUncheck').click(function(){

   if( $('#CheckUncheck').attr('data-id') == "check")
   {     


    $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked');
    $("#CheckBoxDiv input[type='checkbox']").trigger('click');

    $(this).val('Uncheck All');  
    $(this).attr('data-id','uncheck');



    }
    else
    {           

   $("#CheckBoxDiv input[type='checkbox']").attr('checked','checked').trigger('click');


    $(this).val('Check All');
    $(this).attr('data-id','check');
    }


});


});

它正在工作......检查演示......在给定的链接中

Answer 2

这是DEMO
您正在更改选中的属性，然后触发导致您更改的选中属性恢复的点击事件

 $('#CheckUncheck').toggle(function(){
    $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked')//chk box unchecked
    $("#CheckBoxDiv input[type='checkbox']").trigger('click');//chk box checked
    $(this).val('Check All')
},function(){
    $("#CheckBoxDiv input[type='checkbox']").attr('checked', 'checked').trigger('click');//same here first check by change in attribute then unchecked by triggering click event
    $(this).val('Uncheck all');        
});

试试这个—— 首先触发 click 事件，然后更改 ckecked 值

 $('#CheckUncheck').toggle(function(){
 $("#CheckBoxDiv input[type='checkbox']").trigger('click').removeAttr('checked')            
        $(this).val('Check All')
    },function(){
        $("#CheckBoxDiv input[type='checkbox']").trigger('click').attr('checked', 'checked');
        $(this).val('Uncheck all');        
    });

这是带有固定点击功能的预期结果链接

http://jsfiddle.net/jbaq66ev/17/

Answer 3

您将取消选中更改为选中。 试试这个代码。我已经用你的代码测试了它。这是你的demo

     $(document).ready(function(){
        $('#CheckUncheck:button').toggle(function(){ 
        $('input:checkbox').removeAttr('checked');
            $(this).val('check all'); 
        },function(){
              $('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all')      
        })
    });

要检查是否选择了值，您可以使用 this 之类的属性。

   $("#CheckBoxDiv input[type='checkbox']").click(function () {
    var cbValue = "#"+$(this).val();
          if ($(this).prop('checked')==true){ 
           $(cbValue).show();
          }else{
           $(cbValue).hide();
          }
});