Get if checkbox is checked or not in jquery/ES6

Question

Following is my jQuery code by which I am trying to retrieve whether the checkbox is clicked or not. I used both is and prop but somehow its always returning false and undefined in console. Let me know what I am doing wrong here.

Also, let me know the more better way to handle the checkbox value is to target the click or change event on checkbox( currently I am listening to click event).

jQuery Code -

const $document = $(document);
$document.ready(() => {
    $("input[type='checkbox']").on('click', () => {
        console.log("Checked Value 'is' :: ", $(this).is(':checked'));
        console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
    })
})

HTML CODE -

<form name="myForm" id="#myForm">
    <div>
        <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>
    </div>
    <div>   
        <button type="submit" name="submit">Submit</button>
    </div>  
</form>

JSFIDDLE - https://jsfiddle.net/82Lz1c8w/4/

EDIT - Few of the folks before getting into the question just marking it as duplicate however in this case the solution that they are referring with the below mentioned links won't work as I am using arrow functions and its changing the context. Please read the answers for the support.

this is a duplicate of http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery — thedude, Apr 24 '17 at 08:47
Possible duplicate of [Check if checkbox is checked with jQuery](http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery) — Alon Eitan, Apr 24 '17 at 08:49
@thedude I checked this post as well and in that same thread they mentioned is and prop use, now my code is not working and I posted the scenario ..so this cannot be treated as duplicate — Nesh, Apr 24 '17 at 08:51
Just because **click** and **change** events has a different order in different browsers: http://stackoverflow.com/questions/25014911/is-there-a-standard-for-the-event-order-of-click-and-change-on-a-checkbox/25093845#25093845 — Alex Slipknot, Apr 24 '17 at 08:52

Tushar · Accepted Answer · 2017-04-24T08:55:20.423

Use normal function. When arrow syntax is used, this inside it will refer to the enclosing context. Also, use change event.

No binding of this

$("input[type='checkbox']").on('change', function() {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
});

Fiddle

$("input[type='checkbox']").on('change', function() {
  console.log("Checked Value 'is' :: ", $(this).is(':checked'));
  console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>

Thx a lot for the info...I am really fascinated by `this` in arrow functions :) — Nesh, Apr 24 '17 at 09:07

score 2 · Answer 2 · answered Apr 24 '17 at 08:51

2

Try below code:

 $("input[type='checkbox']").on('change', (e) => {
      console.log("Checked Value 'is' :: ", e.currentTarget.checked);
 })

answered Apr 24 '17 at 08:51

Sandip - Frontend Developer

14,397
4
35
61

score 1 · Answer 3 · answered Apr 24 '17 at 08:51

If you use that syntax you need to change your code to

$document.ready(() => {
    $("input[type='checkbox']").on('click', (e) => {
        console.log("Checked Value 'is' :: ", $(e.target).is(':checked'));
        console.log("Checked Value 'prop' :: ", $(e.target).prop('checked'));
    })
})

score 1 · Answer 4 · answered Apr 24 '17 at 08:51

Working code:

const $document = $(document);
$document.ready(() => {
    $("input[type='checkbox']").on('click', (e) => {
        const selfEvent = $(e.currentTarget)
        console.log(selfEvent)
        console.log("Checked Value 'is' :: ", selfEvent.is(':checked'));
        console.log("Checked Value 'prop' :: ", selfEvent.prop('checked'));
    })
})

Please note that this refers to window object.

score 1 · Answer 5 · answered Apr 24 '17 at 08:53

Please replace javascript with below code

const $document = $(document);
    $document.ready(function() {
        $("input[type='checkbox']").on('click', function(){
            console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
    })

})

score 0 · Answer 6 · edited Apr 24 '17 at 09:05

$(document).ready(function(){
   $('input[type="checkbox"]').on('click', function() {
      console.log("Checked Value 'is' :: ", $(this).is(':checked'));
      console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
   })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="#myForm">
 <div>
  <p><input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>
 </div>
 <div> 
  <button type="submit" name="submit">Submit</button>
 </div> 
</form>

score 0 · Answer 7 · edited Jun 25 '19 at 08:14

i think you shouldn't use arrow-function because of in arrow-function,this is point to parent scope.you can try replace

$("input[type='checkbox']").on('click', () => {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
})

with

$("input[type='checkbox']").on('click', function() {
    console.log("Checked Value 'is' :: ", $(this).is(':checked'));
    console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
})

Georgios Syngouroglou · Answer 8 · 2019-06-25T09:00:11.750

0

Using ES6 you may do something like the above,

document.querySelector("input[name='accept-t-and-c']").onchange = function() {
    if(this.checked)
        console.log("Checkbox is checked");
    else
        console.log("Checkbox is not checked");
};

edited Jun 25 '19 at 09:00

answered Jun 25 '19 at 08:10

Georgios Syngouroglou

18,813
9
90
92

Get if checkbox is checked or not in jquery/ES6

8 Answers8