Solved

How do I capture a checkbox change event using JQuery?

Posted on 2014-07-17
6
34,578 Views
Last Modified: 2016-09-19
I have a web page with several check boxes on it. When a checkbox is checked, I need to perform some functionality that I won't go into.
Anyway, so my question is "How do I capture the Check Box Change event" using JQuery?

I tried using the following code below, however the checkbox event only fires sporadically, and not on every click
event like I need it to.


$(document).ready(function ()
{
   $(":checkbox").change(function ()
      {
       alert('I have been checked');
      }

});
});
0
Comment
Question by:brgdotnet
6 Comments
 
LVL 4

Accepted Solution

by:
Jack Leach earned 280 total points
ID: 40203718
bind to the click() event instead:

$(document).ready(function() {

 $("#yourcheckbox").on("click", function() {
    alert($(this).attr("checked"));
  });

});

hth
0
 
LVL 2

Author Comment

by:brgdotnet
ID: 40203729
Hi Jack,

The issue here is that my page has over 50 check boxes on it. So I think that $("#yourcheckbox"). is too specific to the id of the check box control isn't it.

Basically I just want to know when any checkbox has been clicked.
0
 
LVL 4

Expert Comment

by:Jack Leach
ID: 40203737
Sorry... the $(":checkbox") syntax should be fine, just use the click event instead of the change event.  Change seems to be problematic with checkboxes for whatever reason

Alternatively, try the following syntax:

$("[type=checkbox]").click(function() {
  // your stuff
});
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 50 total points
ID: 40203772
Here is a working sample I made http://jsbin.com/josoq/1/edit?html,output
Notice no pop up if not checked.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <script>
    $(function(){
  $('input[type="checkbox"]').change(function(){
    var id=$(this).attr('id');
    var something = $(this).attr('data-something');
    var value=$(this).val();
    if ($(this).prop('checked')){
        // do something
        alert('id:'+id+' something:'+something+' value:'+value);
        }
  });
  
});
    </script>
  <title>padas</title>
</head>
<body>
<input id="1" type="checkbox" data-something="1 html" name="interest" value="html">HTML<br>
<input id="2" type="checkbox" data-something="2 css"  name="interest" value="css">CSS<br>
<input id="3" type="checkbox" data-something="3 js"   name="interest" value="js">Javascript<br>    
<input id="4" type="checkbox" data-something="4 xml"  name="interest" value="xml">XML<br>
<input id="5" type="checkbox" data-something="5 asp"  name="interest" value="asp">ASP<br>
<input id="6" type="checkbox" data-something="6 php"  name="interest" value="php">PHP<br>    
  
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:brgdotnet
ID: 40203798
Thanks Guys. I will try these out tomorrow, and then dole out the points.
0
 

Expert Comment

by:Umesh Shejole
ID: 41805858
Just tried working properly.

Thank you !!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now