Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 44751
  • Last Modified:

How do I capture a checkbox change event using JQuery?

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
brgdotnet
Asked:
brgdotnet
2 Solutions
 
Jack LeachCommented:
bind to the click() event instead:

$(document).ready(function() {

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

});

hth
0
 
brgdotnetAuthor Commented:
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
 
Jack LeachCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Scott Fell, EE MVEDeveloperCommented:
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
 
brgdotnetAuthor Commented:
Thanks Guys. I will try these out tomorrow, and then dole out the points.
0
 
Umesh ShejoleCommented:
Just tried working properly.

Thank you !!!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now