3

I thought this was supposed to be easy. There are a lot of answers on here about unchecking checkboxes using jQuery but when I try them they don't seem to work. I want to uncheck them as part of my function for resetting the form.

I have a loop and I create checkboxes inside it: <input type="checkbox" name="is_chosen[]" value="{{ $sample->id }}" class="flat">

Here is the my code for unchecking checkboxes (not all checkboxes are checked initially):

$('input:checkbox').each(function () {
  if(this.checked) {
    $(this).attr('checked', false);
  }
});

I have also tried replacing attr with prop. I have also tried using just $(input:checkbox).prop('checked', false);. I have tried others more but they don't work. What am I missing?

5
  • It should $(input:checkbox).prop('checked', false);. If it doesn't work check what $(input:checkbox) selects.
    – dfsq
    May 10, 2016 at 6:30
  • demo check the demo it works
    – guradio
    May 10, 2016 at 6:32
  • Click Here Hope it will help :)
    – Mir
    May 10, 2016 at 6:32
  • You don't need to loop . Just use $(":checked").attr('checked', false); as in my answer May 10, 2016 at 6:40
  • I'm sorry for the inconvenience guys. I found out that the problem was class="flat" (from Bootstrap), although I don't know why exactly. I became worried because none of your answers were working. Then I thought of removing the class. When the class was there, all the checked checkboxes were still checked after executing the function. When I removed the class, the checkboxes became unchecked after performing the function. I tried your answers again and they worked. I tried the code that I posted too and it worked. (Btw, do I have to post this as an answer?)
    – CH123
    May 10, 2016 at 7:06

5 Answers 5

13

You don't need to use each(). You can do it like following.

$('input:checkbox:checked').prop('checked', false);
1
  • 1
    using the .attr() function didn't work for me but the .prop() function did
    – ShaneMit
    Aug 2, 2017 at 15:33
2

It does work: https://jsfiddle.net/bfqew4du/

setInterval(function(){
  $('input:checkbox').each(function () {
    $(this).attr('checked', !this.checked);
  });
},1000);

Be sure that you are running the javascript after the DOM loads.

9
  • 1
    Loop is not required here as it can be accomplished with $(":checked").attr('checked', false); May 10, 2016 at 6:41
  • Loop or not is hardly the issue though @ArunSharma. This answered the question.
    – Mackan
    May 10, 2016 at 6:41
  • @Mackan It's not only about answering the question. Your code got to be clean, clear and to the point. setInterval and .each are useless chunks of code here. May 10, 2016 at 6:45
  • What if he cleaned the code down to these lines for stackOverflow sake but needs forEach logic in his app? This is still 100% valid. May 10, 2016 at 6:46
  • @ArunSharma I agree, but the most important part is answering the question, and both you and the other answer fail to do that.
    – Mackan
    May 10, 2016 at 6:46
2

You don't need to loop, it can be achieved with a single line of code: Use $(":checked").attr('checked', false);

$(document).ready(function(){
    $(":checked").attr('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">

0

It is a good idea to apply a unique class name to the dynamic elements, so that they all can be selected using this class name. So while generating you can append the checkbox with a class name

...append('<input type="checkbox" name="is_chosen[]" value="1" class="flat dynmc-check">');

then use this class dynmc-check to select these checkboxes:

$('.dynmc-check')

Using this selector you perform the required actions, e.g. reset checkbox:

$('.dynmc-check').removeAttr('checked');

or count the checked ones:

var checkCount = $('.dynmc-check:checked').length;

See this working fiddle for detail.

0

I'm sorry for the inconvenience guys.

I found out that the problem was class="flat" (from Bootstrap), although I don't know why exactly. I became worried because none of your answers were working. Then I thought of removing the class. When the class was there, all the checked checkboxes were still checked after executing the function. When I removed the class, the checkboxes became unchecked after performing the function. I tried your answers again and they worked. I tried the code that I posted too and it worked. So it was the class all along.

Not the answer you're looking for? Browse other questions tagged or ask your own question.