javascript - Get if checkbox is checked or not in jqueryES6 - Stack Overflow

admin管理员组

文章数量:1399939

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

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.

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/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.

• javascript
• jquery
• html
• ecmascript-6
• arrow-functions

Share Improve this question Follow edited Apr 24, 2017 at 9:24 Nesh asked Apr 24, 2017 at 8:46 NeshNesh 2,57199 gold badges4040 silver badges5656 bronze badges 7

• 6 this is a duplicate of stackoverflow./questions/2204250/… – thedude Commented Apr 24, 2017 at 8:47
• stackoverflow./a/2204275/5985593 – JC97 Commented Apr 24, 2017 at 8:48
• 2 Possible duplicate of Check if checkbox is checked with jQuery – Alon Eitan Commented Apr 24, 2017 at 8:49
• 1 @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 Commented Apr 24, 2017 at 8:51
• Use change instead of click. – Harish Kommuri Commented Apr 24, 2017 at 8:51

 |  Show 2 more ments

8 Answers 8

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="accept-t-and-c" /> I accept terms and conditions</p>

Try below code:

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

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'));
    })
})

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.

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'));
    })

})

$(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./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>

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'));
})

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");
};

本文标签： javascriptGet if checkbox is checked or not in jqueryES6Stack Overflow