How do I check if multiple checkboxes are unchecked in jQuery?

Question

I have 3 checkboxes I need a check to see if all 3 of them are unchecked, but so far my effort to get this to work has not been successfully.

What is the correct way to do this in jQuery?

Some of my tries so far:

if( $("#adviceonprivatemail").not(":checked") && $("#adviceonmobile").not(":checked") && $("#adviceoncompanymail").not(":checked")  ){
  console.log('All is disabled')
}else{
  console.log('All is enable')
}

if( $('#adviceonprivatemail').not(':checked').length) && $('#adviceonmobile').not(':checked').length) && $('#adviceoncompanymail').not(':checked').length) ){
  console.log('Alle er disabled')
}

if( $('#adviceonprivatemail').not(':checked').length) && $('#adviceonmobile').not(':checked').length) && $('#adviceoncompanymail').not(':checked').length) ){
  console.log('Alle er disabled')
}

You have syntax errors in your 2nd and 3rd tries (you have an extra `)` after each `.length`). It should be `$('#adviceonprivatemail').not(':checked').length` not `$('#adviceonprivatemail').not(':checked').length)`. — WOUNDEDStevenJones, Nov 19 '21 at 17:28
@WOUNDEDStevenJones unfortunately not, I have allready seen that post along with others here at the site, but none of them helped with this particular case. — Stig Kølbæk, Nov 19 '21 at 17:29
It's odd that you say none of the solutions in that duplicate helped in your case, and then the answer you selected below works? That answer is one of the top solutions in the duplicate question. — devlin carnate, Nov 19 '21 at 17:41
I might be wrong, but if you refer to https://stackoverflow.com/questions/901712/how-do-i-check-whether-a-checkbox-is-checked-in-jquery I do not see in the top answers anything that checks if multiple checkboxes are checked!? .. as I say I might be wrong or blind but thats how I have read the posts. — Stig Kølbæk, Nov 19 '21 at 17:47
Adding further clarification to help clear some possible confusion. It seems there are 2 parts to your question. 1. how to check if a checkbox is checked. The attempts in your question weren't quite correct in that process. As explained in my answer, your first attempt was only using `.not(':checked')` when it should've been `.not(':checked').length` like in your 2nd/3rd attempts. But your 2nd/3rd attempts had a syntax error, which is why those weren't working. — WOUNDEDStevenJones, Nov 19 '21 at 17:57
2. how does boolean logic work when checking multiple false conditions. `if (1 is checked && 2 is checked && 3 is checked) { all are checked } else { not all are checked}`. But that's _not the same_ as saying `if ... else { none are checked }`. So then if you invert the conditional, you'll have `if (1 is NOT checked && 2 is NOT checked && 3 is NOT checked) { none are checked } else { some are checked }`. — WOUNDEDStevenJones, Nov 19 '21 at 17:57
@StigKølbæk [This answer](https://stackoverflow.com/a/6458172/2359687). And stating that the distinction is that it only shows one checkbox vs multiple checkboxes is arbitrary. Duplicate questions don't have to be exactly identical. And in this case, it's obvious you know how to find all of the checkboxes -- your problem is HOW you're evaluating whether or not they're checked, not with locating the elements. — devlin carnate, Nov 19 '21 at 17:57

Leandro Bardelli · Accepted Answer · 2021-11-19T17:40:10.517

1

Use prop

  if( $("#adviceonprivatemail").prop("checked") && $("#adviceonmobile").prop("checked") && $("#adviceoncompanymail").prop("checked")  ){
      alert('All are enabled')
    }else{
      alert('Some are disabled')
    }

Also you can do something like: If you use some new "data-attribute" with the same identificator, you can select them 3 at once, and then do a foreach until someone is checked

<input type="checkbox" data-chk="this" id="adviceonprivatemail" />
<input type="checkbox" data-chk="this" id="adviceonmobile" />
<input type="checkbox" data-chk="this" id="adviceoncompanymail" />

if( $("[data-chk='this']").prop("checked") == false ){
  alert('All are disabled')
}else{
  alert('Some are enabled')
}

edited Nov 19 '21 at 17:40

answered Nov 19 '21 at 17:17

Leandro Bardelli

10,561
15
79
116

1

great solutions both of them, espeacially I like the data-chk solution, that is perfect!! .. Thank you so much for your help :-) – Stig Kølbæk Nov 19 '21 at 17:31
@StigKølbæk take consideration my error, I fixed it. If one is true, not all of them is true, just someone – Leandro Bardelli Nov 19 '21 at 17:39

WOUNDEDStevenJones · Answer 2 · 2021-11-19T18:02:17.033

You have syntax errors in your 2nd and 3rd tries (you have an extra ) after each .length). It should be $('#adviceonprivatemail').not(':checked').length not $('#adviceonprivatemail').not(':checked').length).

Additionally, :not is kind of a selector so it returns any matching elements, while :is is a boolean check, which returns true/false. Which is why $("#adviceonprivatemail").not(":checked") doesn't work, but $("#adviceonprivatemail").not(":checked").length does (0 is falsey, 1+ is truthy). To replicate the .not behavior, you can do !$("#adviceonprivatemail").is(":checked") which is the logical way of saying "if it's not checked".

And per the linked question, using .prop('checked') is another way to check this. But again, you'll need to invert the logic using ! like in the first example below.

$('input').on('change', function() {
  // https://stackoverflow.com/a/6438222/1499877
  // use `.is(':checked')`
  if (!$("#adviceonprivatemail").is(":checked") &&
    !$("#adviceonmobile").is(":checked") &&
    !$("#adviceoncompanymail").is(":checked")
  ) {
    console.log('All are disabled 1');
  } else {
    console.log('Some are enabled 1');
  }

  // use `.not(':checked').length`
  if (
    $('#adviceonprivatemail').not(':checked').length &&
    $('#adviceonmobile').not(':checked').length &&
    $('#adviceoncompanymail').not(':checked').length
  ) {
    console.log('All are disabled 2');
  } else {
    console.log('Some are enabled 2');
  }

  // https://stackoverflow.com/a/6458172/1499877
  // use `.prop('checked')`
  if (!$("#adviceonprivatemail").prop('checked') &&
    !$("#adviceonmobile").prop('checked') &&
    !$("#adviceoncompanymail").prop('checked')
  ) {
    console.log('All are disabled 3');
  } else {
    console.log('Some are enabled 3');
  }
});

$('input').first().change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="adviceonprivatemail" />
<input type="checkbox" id="adviceonmobile" />
<input type="checkbox" id="adviceoncompanymail" />

That is a nice touch, I can absolutely use that in another function to differ between all check, some checked and none checked .. Thank you WOUNDEDStenvenJobs for your solution. — Stig Kølbæk, Nov 19 '21 at 17:39

How do I check if multiple checkboxes are unchecked in jQuery?

2 Answers2