jQuery click function not triggered when unchecking checkbox_问答_开发者

jQuery click function not triggered when unchecking checkbox

开发者 https://www.devze.com 2023-03-22 08:42 出处：网络

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="Sta开发者_运维知识库r4"  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.

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

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');
   }
})

Try this for your javascript:

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

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

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.