$(this).prop('checked') not working for checking checkbox for Jquery

Question

I have checkboxes with HTML:

<input type="checkbox" class="selectMakeup" name="needsPartNumber">

There can be a lot of checkboxes with the same class. I want to loop through each of the checked checkboxes.

$('.selectMakeup').each(function() {
  console.log($(this).html())
  console.log($(this).prop('checked'))
  if ($(this).prop('checked')) {
    //Do Stuff
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="selectMakeup" name="needsPartNumber">

console.log($(this).html())

returns

<input type="checkbox" name="needsPartNumber">

But console.log($(this).prop('checked')) returns undefined.

The first prints `""` since the element has no `innerHTML`. The second returns `false`, as expected. https://jsfiddle.net/khrismuc/r64bdhqo/ - Looping through all checkboxes: `$('input[type=checkbox]:checked').each(...)` — , Oct 10 '19 at 18:29
If the first log prints what you say it prints, it means that you are selecting its parent. — Karl-André Gagnon, Oct 10 '19 at 18:31
This result can't be coming from the HTML and JS that you show. Post the real code. — Barmar, Oct 10 '19 at 18:33
Running the code in Edge Chromium, I see blank, then `false`... — Heretic Monkey, Oct 10 '19 at 18:35
If you have a bunch of checkboxes *inside* the element with class `selectMakeup`, you need `$('.selectMakeup :checked')` — , Oct 10 '19 at 18:35
Possible duplicate of [Using jquery to get all checked checkboxes with a certain class name](https://stackoverflow.com/questions/5450104/using-jquery-to-get-all-checked-checkboxes-with-a-certain-class-name) — Heretic Monkey, Oct 10 '19 at 18:38
You guys are right. The code I gave turned out to be incorrect. I added the classname to the parent container by mistake in my actual code. Sorry — jedu, Oct 10 '19 at 19:26

score 3 · Accepted Answer · answered Oct 10 '19 at 18:35

3

This should return all checked checkboxes with a given class

$('.selectMakeup:checked').each(function() {});

answered Oct 10 '19 at 18:35

BFunk

387
5
11

Tim Lewis · Answer 2 · 2019-10-10T18:40:15.940

2

If you want to check if a checkbox/radio option is "checked", you can use .is():

$('.selectMakeup').each(function(){
    console.log($(this).is(":checked"));
    if($(this).is(':checked')){
      // Do something
    }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="selectMakeup" name="needsPartNumber">

-- Edit --

As the comments are suggesting, $(this).prop("checked") should return true or false, unless you're targeting an element via $(this) that isn't a radio/checkbox.

edited Oct 10 '19 at 18:40

answered Oct 10 '19 at 18:31

Tim Lewis

27,813
13
73
102

2

This will work, but so should the original test. – Barmar Oct 10 '19 at 18:31
1

`.is()` is a selector check while `.prop()` checks its property. Both works but the later is the preferred method and the fastest. – Karl-André Gagnon Oct 10 '19 at 18:33
Ah yes; just did some more tests. I got a false positive on the `undefined` result when running a test here on SO (`console.log($("input[type=radio]").prop("checked"));`). Initally got `undefined` as there were currently no rendered `radio` options, until I opened the `close` dialogue and got `true` and `false` as expected. – Tim Lewis Oct 10 '19 at 18:35
You should consider using a [Stack Snippet](https://meta.stackoverflow.com/q/358992/215552) to include both JavaScript and HTML in your answers -- it makes it easier to test. – Heretic Monkey Oct 10 '19 at 18:37
With your way you have to loop over every checkbox. If you look at my answer it only returns the checked checkboxes – BFunk Oct 10 '19 at 18:39
@HereticMonkey Yeah, sorry. I rarely post on JS answers, so I often forget that's an option. Edited, thanks. – Tim Lewis Oct 10 '19 at 18:41
@BFunk That's beside the point; there might be a case where you want to do something with the unchecked ones vs the check ones. The question is just a snippet; we don't know the full context of the code. And yeah, your answer is perfectly valid. – Tim Lewis Oct 10 '19 at 18:42
@TimLewis His post says "I want to loop through each of the checked checkboxes." So I read that as only wanting something to do with the checked ones. – BFunk Oct 10 '19 at 18:44
@BFunk Fair observation, but again, it's beside the point. No harm in having 2 approaches. – Tim Lewis Oct 10 '19 at 18:45

$(this).prop('checked') not working for checking checkbox for Jquery

2 Answers2