How to detect a checkbox click in jQuery

Question

I cannot detect when and which checkbox gets clicked from script below:

HTML Snippet:

<label for="checkbox[1]"><input type="checkbox" name="checkbox[1]" id="checkbox[1]" class="detectThisChange" value="10.00" checked=""> Amount $10.00</label>
<label for="checkbox[2]"><input type="checkbox" name="checkbox[2]" id="checkbox[2]" class="detectThisChange" value="20.00" checked=""> Amount $20.00</label>
<label for="checkbox[3]"><input type="checkbox" name="checkbox[3]" id="checkbox[3]" class="detectThisChange" value="30.00" checked=""> Amount $30.00</label>

jQuery Snippet:

$(document).ready(function() {
  $(window).load(function() {
// ... //
        $('.detectThisChange').change(function(event){
          var targetID = triggerEvent.target.id; // get the id that triggered the event
          var posStart = targetID.indexOf('[') + 1;
          var posEnd = targetID.indexOf(']');
          var i = targetID.substring(posStart, posEnd); // get the index of the id that triggered the event

          if ( $('#checkbox\\['+ i +'\\]').prop('checked') != true ) {
            alert('checkbox ' + i + ' was checked');
          }
          else {
            alert('checkbox ' + i + ' was unchecked');
          }

        });
// ... //
  }); // end .load()
}); // end .ready()

Appended:

The problem I am experiencing is that none of my alerts work. So that tells me the change() function is not firing.

Ok, thanks @97ldave. In the selected answer, what does the id frameName part of jQuery("#frameName").contents() represent? — H. Ferrence
– H. Ferrence, Commented Dec 24, 2014 at 12:13
Thank you @BhojendraSah. See my appended comment in my OQ. The change() function is not even firing. — H. Ferrence
– H. Ferrence, Commented Dec 24, 2014 at 12:15
Thanks @Invent-Animate. My problem is I cannot get to my change() function. — H. Ferrence
– H. Ferrence, Commented Dec 24, 2014 at 12:16

Everton Lenger · Accepted Answer · 2014-12-24 12:36:47Z

19

If you are adding this HTML dinamically, you should use the .on() method, like:

$(document).on('change', '.detectThisChange', function() {
    // your code
});

Give it a try and let me know if it helps.

answered Dec 24, 2014 at 12:36

Everton Lenger

1,4572 gold badges18 silver badges34 bronze badges

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

2 Comments

Everton Lenger Over a year ago

I've fallen into this so many times that it's the first thing I check when it doesn't work.. Glad that helped! :)

Stop War Over a year ago

This the only way that I could get the .on('change', ... to fire. Works with .on('click',...) also. Others did not. BTW, I was also struck for hours trying to get it to fire using the same method which of course was failing.

Martijn Pieters · Accepted Answer · 2021-05-07 00:36:16Z

7

Try like this

$("input[type=checkbox]").is(":checked") // returns boolean checked or unchecked

   var arr = [];
    $("input[type=checkbox]").each(function () {
        var self = $(this);
        if (self.is(':checked')) {
            arr.push(self.attr("id"));
        }
    });
    console.log(arr);

EdIted:

$("input[type=checkbox]").on('change', function () {
    var self = $(this);
    if (self.is(":checked")) {
        console.log("checkbox  id =" + self.attr("id") + "is checked ");
    } else {
        console.log("Id = " + self.attr("id") + "is Unchecked ");
    }
});

Edited 2 :

$("body").on('change','.detectThisChange', function () {
    var self = $(this);
    if (self.is(":checked")) {
        console.log("checkbox  id =" + self.attr("id") + "is checked ");
    } else {
        console.log("Id = " + self.attr("id") + "is Unchecked ");
    }
});

Working Demo

edited May 7, 2021 at 0:36

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Dec 24, 2014 at 12:13

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

6 Comments

H. Ferrence Over a year ago

I need to get my event listener to work first @Satindersingh. Then I am sure your answer will work.

H. Ferrence Over a year ago

that looks like a new approach. give me a moment to try it @Satindersingh

H. Ferrence Over a year ago

But I have over 20+ check boxes ion my script @Satindersingh. Is this going to fire on every checkbox when checked?

Satinder singh Over a year ago

@H.Ferrence : you can set your selector accordingly like if you want for element having class detectThisChange then use $(".detectThisChange").on('change',function(){});

H. Ferrence Over a year ago

I did that from the beginning @Satindersingh. That is what caused me to come here to post

|

user2575725 · Accepted Answer · 2014-12-24 12:27:44Z

2

Try on change event with this id selector as 'input[id^=checkbox]':

$(function() {
  $('input[id^=checkbox]').on('change', function() {
    console.log(this.value, this.checked);
  }).trigger('change');//fire event on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkbox[1]">
  <input type="checkbox" name="checkbox[1]" id="checkbox[1]" class="detectThisChange" value="10.00" checked="">Amount $10.00</label>
<label for="checkbox[2]">
  <input type="checkbox" name="checkbox[2]" id="checkbox[2]" class="detectThisChange" value="20.00" checked="">Amount $20.00</label>
<label for="checkbox[3]">
  <input type="checkbox" name="checkbox[3]" id="checkbox[3]" class="detectThisChange" value="30.00" checked="">Amount $30.00</label>

answered Dec 24, 2014 at 12:27

user2575725

2 Comments

H. Ferrence Over a year ago

thanks @Arvind. It did not work for me even though I know it works for you. I just can't get my change to fire.

user2575725 Over a year ago

@H.Ferrence, any errors on the console? which browser are you using?

Mark C. · Accepted Answer · 2014-12-24 12:42:17Z

2

Try this :

$(".detectThisChange").on('change', function () {

    alert("In the function");
    var targetID = this.id; // get the id that triggered the event
    var posStart = targetID.indexOf('[') + 1;
    var posEnd = targetID.indexOf(']');
    var i = targetID.substring(posStart, posEnd); // get the index of the id that triggered the event

    if ($('#checkbox\\[' + i + '\\]').prop('checked') == true) {
        alert('checkbox ' + i + ' was checked');
    } else {
        alert('checkbox ' + i + ' was unchecked');
    }
});

Here's the JSFiddle, even though you have an answer :)

answered Dec 24, 2014 at 12:42

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-12-24 12:13:27Z

0

Try:)

if ( $('#checkbox\\['+ i +'\\]').is(":checked") ) {
  alert('checkbox ' + i + ' was checked');
}
else {
  alert('checkbox ' + i + ' was unchecked');
}

answered Dec 24, 2014 at 12:13

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

H. Ferrence Over a year ago

I am sure your answer will work @BhojendraSah once I get the change()function to fire.

Collectives™ on Stack Overflow

How to detect a checkbox click in jQuery

5 Answers 5

2 Comments

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related