0

I have a table (in practice a grid) that can display a set of columns and the user can select the columns to display with a checkbox list. I had to insert a Check All/Uncheck All button.

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

Now when I click the Uncheck All button for the first time, the boxes are not getting unchecked but works normally after that. I have attached a Fiddle for a better understanding.

What am I doing wrong? Also, am I triggering the change function in a valid manner?

JSFiddle: DEMO

valyrian
  • 195
  • 1
  • 1
  • 11

3 Answers3

1

Here's the DEMO
You are changing the checked attribute then triggering the click event that causing revert of your changing checked attribute

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

try this-- firstly fire click event and after that change the ckecked value

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

Here's your link of expected result with fixed click function

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

vikrant singh
  • 2,091
  • 1
  • 12
  • 16
1

You're changing the uncheck to check. Try this code. I've tested it with your code. Here's your 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')      
        })
    });

For checking if value is selected or not you can use prop like this.

   $("#CheckBoxDiv input[type='checkbox']").click(function () {
    var cbValue = "#"+$(this).val();
          if ($(this).prop('checked')==true){ 
           $(cbValue).show();
          }else{
           $(cbValue).hide();
          }
});
Ken de Guzman
  • 2,790
  • 1
  • 19
  • 33
  • under the #CheckUncheck, I have a number of buttons. So I don't think I can use #CheckUncheck:button as a selector. – valyrian Aug 25 '14 at 07:15
  • you can only use #CheckUncheck like what did you do in your demo fiddle. I've updated the link demo for you to see. – Ken de Guzman Aug 25 '14 at 07:23
  • Phew that works. Can you see my click function too? I think that's more important. – valyrian Aug 25 '14 at 07:25
  • I see you have taken off the click function altogether. I know it works without the click function. I wanted to have the click function and still wanted it to work. Without click function: http://stackoverflow.com/questions/5229023/jquery-check-uncheck-all-checkboxes-with-a-button – valyrian Aug 25 '14 at 07:29
  • what do you mean with you click function to div? you want to check a checkbox and hide/show the value of it? – Ken de Guzman Aug 25 '14 at 07:38
0

Here is the NEW DEMO LINK look at it.... Is this you want... But for it you have to see wheather the checkvboxes are by default checked or not...

i have changed your htmml little just added data-id attribute to button

<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>

And new 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');
    }


});


});

It is working ... check the demo.... in given link

Jaimin MosLake
  • 655
  • 1
  • 12
  • 30