jQuery click function not triggered when unchecking checkbox

Question

This is doing my head in, I have googled the life out of it, but below is my code, very simple, but I do not get the click event triggered when unchecking a checkbox??

$('#filterStarDiv #hotelFilterForm #Star0').click( function() {
alert('Checkbox 0 clicked');});

<div id="starsRemoved" style="display:none">No Stars Removed</div>
<div id="filterStarDiv">
<h6>Click on the star ratings below to add or remove hotels in that category</h6>
<form:form id="hotelFilterForm" action="" acceptCharset="UTF-8">
    <input type="checkbox" id="Star0"  name="Star0" value="0 Star" checked="checked" /> 0 Star<br />
    <input type="checkbox" id="Star1"  name="Star1" value="1 Star" checked="checked" /> 1 Star<br />
    <input type="checkbox" id="Star2"  name="Star2" value="2 Star" checked="checked" /> 2 Star<br />
    <input type="checkbox" id="Star3"  name="Star3" value="3 Star" checked="checked" /> 3 Star<br />
    <input type="checkbox" id="Star4"  name="Star4" value="4 Star" checked="checked" /> 4 Star<br />
    <input type="checkbox" id="Star5"  name="Star5" value="5 Star" checked="checked" /> 5 Star+<br />
</form:form>
</div>

Any help, even abuse if I am missing something stupid, would be appreciated.

Ids are unique, you don't have to address them as a dependency like this: #filterStarDiv #hotelFilterForm #Star0. Just #Star0 will be enough. — nfechner
– nfechner, Commented Jul 21, 2011 at 8:37
What is: <form:form and </form:form> ? Also input elements in a form need to be put inside a <div> or a <p>. You can't put them directly inside the <form> tag. — Ariel
– Ariel, Commented Jul 21, 2011 at 8:38
Seems to work fine to me: jsfiddle.net/Maga2 (I fixed the form tag of course.) — Ariel
– Ariel, Commented Jul 21, 2011 at 8:40

Awea · Accepted Answer · 2011-07-21 08:43:41Z

2

You can try something like this :

$("input[type=checkbox]").click( function() {
    if ($(this).is(':checked')){
        alert('check');
    }
    else{
        alert('uncheck');
    }
});

You can try it on this Fiddle

answered Jul 21, 2011 at 8:43

Awea

3,1838 gold badges42 silver badges60 bronze badges

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

Comments

Jhankar Mahbub · Accepted Answer · 2013-09-11 17:00:26Z

1

Try this for all checkbox. Use Id if you want to do for any specific checkbox

$(':checkbox').click(function(){
    var el = $(this);
    if(!el.is(':checked')){
       alert ('unchecked');
       //if you want to trigger handler or do something. do it here
       el.triggerHandler('click');
   }
})

answered Sep 11, 2013 at 17:00

Jhankar Mahbub

9,85810 gold badges51 silver badges52 bronze badges

Comments

nfechner · Accepted Answer · 2011-07-21 08:41:24Z

0

Try this for your javascript:

$().ready(function() {
    $(':checkbox').click(function() { alert($(this).attr('name')); });
});

answered Jul 21, 2011 at 8:41

nfechner

17.6k7 gold badges48 silver badges64 bronze badges

1 Comment

artemistravel Over a year ago

Using onclick as previously suggested works fine, but as also commented on, using jQuery is the goal. I have used this method for now, until I can work out why the selector isn't triggering the event.

MUS · Accepted Answer · 2011-07-21 08:41:41Z

0

See the working demo over here jsfiddle. You might forgot to add jquery js file reference in your page.

answered Jul 21, 2011 at 8:41

MUS

1,4504 gold badges17 silver badges30 bronze badges

Comments

Kaisar · Accepted Answer · 2011-07-21 09:11:05Z

But This works fine...

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#filterStarDiv #hotelFilterForm #Star0').click( function() {
          alert('Checkbox 0 clicked');
        });
      });
    </script>
  </head>
  <body>
    <div id="starsRemoved" style="display:none">No Stars Removed</div>
    <div id="filterStarDiv">
      <h6>Click on the star ratings below to add or remove hotels in that category</h6>
      <form id="hotelFilterForm" action="" method="post">
        <input type="checkbox" id="Star0"  name="Star0" value="0 Star" checked="checked" /> 0 Star<br />
        <input type="checkbox" id="Star1"  name="Star1" value="1 Star" checked="checked" /> 1 Star<br />
        <input type="checkbox" id="Star2"  name="Star2" value="2 Star" checked="checked" /> 2 Star<br />
        <input type="checkbox" id="Star3"  name="Star3" value="3 Star" checked="checked" /> 3 Star<br />
        <input type="checkbox" id="Star4"  name="Star4" value="4 Star" checked="checked" /> 4 Star<br />
        <input type="checkbox" id="Star5"  name="Star5" value="5 Star" checked="checked" /> 5 Star+<br />
      </form>
    </div>
  </body>
</html>

Find the mistake you did.

Collectives™ on Stack Overflow

jQuery click function not triggered when unchecking checkbox

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Related