button that will uncheck all checkboxes?

Question

I have a checkboxes that are being stored in a cookie.

Here is the jquery code:

//JQuery that will set the checkbox in it's current state
 $("#checkAll").on("change", function() {
    $(':checkbox').not(this).prop('checked', this.checked);
  });

  $(":checkbox").on("change", function(){
    var checkboxValues = {};
    $(":checkbox").each(function(){
      checkboxValues[this.id] = this.checked;
    });
    $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
  });

  function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
      Object.keys(checkboxValues).forEach(function(element) {
        var checked = checkboxValues[element];
        $("#" + element).prop('checked', checked);
      });
    }
  }

  $.cookie.json = true;
  repopulateCheckboxes();

The code above works perfectly but when I try to use a button to uncheck them it does not uncheck at all.

Here is the function that I used:

 $("#UncheckAll").click(function(){
   $("input[type='checkbox']").prop('checked',false);
});

What should I do? could somebody help me.

Do you know if the click callback is even firing? Are some of the checkboxes clearing, but not all of them? — Joel Cornett, Apr 07 '14 at 19:10
Checkboxes are clearing but after an refresh to the page it goes back to being checked. — user3230425, Apr 07 '14 at 19:17
A page refresh will result in a call to `repopulateCheckboxes()`. Assuming that function works as expected, of course the checkbox states will be restored! — Joel Cornett, Apr 07 '14 at 19:24
yep but i hope you give more details into it so if other people will look upon this, they will have a better idea. — user3230425, Apr 07 '14 at 19:46
This has been explained here in detail http://stackoverflow.com/questions/5229023/jquery-check-uncheck-all-checkboxes-with-a-button — WASasquatch, Apr 07 '14 at 19:47

score 1 · Answer 1 · edited May 02 '16 at 18:13

Give all checkboxes a class such as myclass. Then using jQuery.

Remove your cookie in document.ready function

 $.cookie("checkboxValues", null);//checkboxValues is the name of your cookie

For jQuery 1.6+

$("#UncheckAll").click(function(){
   $('input:checkbox:checked.myclass').prop('checked',false);
});

for jquery 1.5-

$("#UncheckAll").click(function(){
   $('input:checkbox:checked.myclass').attr('checked',false);
});

score 0 · Answer 2 · answered Apr 07 '14 at 19:08

0

try this

 $("#UncheckAll").click(function(){
   $('input:checkbox.class').prop('checked',false);
});

or this if not have common class

 $("#UncheckAll").click(function(){
   $(':checkbox').prop('checked',false);
});

answered Apr 07 '14 at 19:08

Tarun

166
10

button that will uncheck all checkboxes?

2 Answers2