jQuery click function not triggered when unchecking checkbox
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.
加载中,请稍侯......
精彩评论