Question

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

$('#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

这是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');        
});

试试这个 - 首先触发点击事件，然后更改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 2

您正在更改取消选中以进行检查。试试这个代码。我已经用你的代码对它进行了测试。这是您的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();
          }
});

Answer 3

这是 NEW DEMO LINK 看看它....这是你想要的......但是为了它你必须看到默认情况下检查的复选框是不是..

我已经更改了你的htmml，只是将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');
    }


});


});

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

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

3 个答案: