JQUERY ON('change') get checkbox value and state

Question

How can I "get" the checkbox that changed inside div "containerDIV"?

View:

@model MyModel

<div id="containerDIV">
<ul id="CheckBoxList">
@foreach (XObject t in MyModel.XCollection)
         {
         <li>
           <input type="checkbox" value="@t.id"/>
         </li>
         }
</ul>

On the JavaScript (Jquery) side, I have this:

$('#containerDIV').on('change', '#CheckBoxList', function (event) {

    var id = $(this).val(); // this gives me null
    if (id != null) {
      //do other things
    }

});

It's clear that $this is not the checkbox, it's the div containerDIV or checkBoxList

How can I get to the checkbox's state and value?

event.target would be the dom element which triggered the change event — billyonecan
– billyonecan, Commented Jan 3, 2015 at 18:34
@billyonecan this should work, but I'm trying to get the right syntax — The One
– The One, Commented Jan 3, 2015 at 18:38

Nicola Pedretti · Accepted Answer · 2020-06-18 00:29:23Z

11

The way i got it to work correctly was using .is(':checked').

$('selector').change(function (e) {
        // checked will equal true if checked or false otherwise
        const checked = $(this).is(':checked')); 
});

answered Jun 18, 2020 at 0:29

Nicola Pedretti

5,1983 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sizzling Code Over a year ago

This is more better approach.

jmore009 · Accepted Answer · 2015-01-03 18:40:27Z

8

If your input is not being created dynamically after the DOM loads you can just call:

$('#CheckBoxList input[type=checkbox]').change(function() {

  var id = $(this).val(); // this gives me null
  if (id != null) {
    //do other things
  }

});

or to use .on() you just need to target the input that's getting clicked:

$('#CheckBoxList').on('change', 'input[type=checkbox]', function() {

  var id = $(this).val(); // this gives me null
  if (id != null) {
    //do other things
  }

});

FIDDLE

edited Jan 3, 2015 at 18:40

answered Jan 3, 2015 at 18:35

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

3 Comments

The One Over a year ago

I can't do that, the view is a partial view, and when it gets replaced, I loose the "binding" between JQUERY and the DOM

jmore009 Over a year ago

@216 look at the second example i posted

jmore009 Over a year ago

@216 added a fiddle too

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

If you can, add the events as an attribute, like onchange='function(this);'. This returns the element to the function, so you can get data such as it's ID, or just modify it like that.

Good Luck!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 3, 2015 at 18:37

DripDrop

1,0021 gold badge9 silver badges18 bronze badges

Comments

The One · Accepted Answer · 2015-01-03 18:50:59Z

1

Following billyonecan comment, this is another way to do it:

$('#containerDIV').on('change', '#CheckBoxList', function (event) {

var id =$(event.target).val();
if (id != null) {
  //do other things
}

});

answered Jan 3, 2015 at 18:50

The One

4,7266 gold badges39 silver badges61 bronze badges

Collectives™ on Stack Overflow

JQUERY ON('change') get checkbox value and state

4 Answers 4

1 Comment

3 Comments

Good Luck!

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Good Luck!

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related