jQuery - Uncheck checkboxes

Question

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?

It should `$(input:checkbox).prop('checked', false);`. If it doesn't work check what `$(input:checkbox)` selects. — dfsq, May 10 '16 at 06:30
[demo](https://jsfiddle.net/Lk12nvjz/) check the demo it works — guradio, May 10 '16 at 06:32
[Click Here](http://stackoverflow.com/questions/17915065/javascript-check-uncheck-checkboxes-based-on-id) Hope it will help :) — Mir, May 10 '16 at 06:32
You don't need to loop . Just use $(":checked").attr('checked', false); as in my answer — Arun Sharma, May 10 '16 at 06: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 '16 at 07:06

score 13 · Answer 1 · answered May 10 '16 at 06:34

13

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

$('input:checkbox:checked').prop('checked', false);

answered May 10 '16 at 06:34

Ibrahim Khan

20,616
7
42
55

1

using the .attr() function didn't work for me but the .prop() function did – ShaneMit Aug 02 '17 at 15:33

score 2 · Answer 2 · answered May 10 '16 at 06:34

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.

answered May 10 '16 at 06:34

tommybananas

5,718
1
28
48

1

Loop is not required here as it can be accomplished with $(":checked").attr('checked', false); – Arun Sharma May 10 '16 at 06:41
Loop or not is hardly the issue though @ArunSharma. This answered the question. – Mackan May 10 '16 at 06: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. – Arun Sharma May 10 '16 at 06: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. – tommybananas May 10 '16 at 06: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 '16 at 06:46
@ Mackan. I have successfully answered it. Please roll your eye balls to the posted answer. – Arun Sharma May 10 '16 at 06:48
The question was essentially "why isn't this working". Showing a more concise way to do the same thing is not answering any question. Please roll your eyeballs to stackOverflow best practices. – tommybananas May 10 '16 at 06:49
@tommybananas: Its one banana problem. Let's stop kicking up the fuss. But inefficient code and poor use of functions is not one of the developer's best practices. – Arun Sharma May 10 '16 at 07:20
It's not inefficient code if it was stripped down... – tommybananas May 10 '16 at 07:22

Arun Sharma · Answer 3 · 2016-05-10T07:10:13.153

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

score 0 · Answer 4 · answered May 10 '16 at 06:59

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.

score 0 · Accepted Answer · answered May 10 '16 at 09:35

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.

jQuery - Uncheck checkboxes

5 Answers5