[jQuery] Counting checked input checkboxes
I would like to count the number of checkboxes with "checked"
attribute equals to true inside the page's "category section" in which
the user clicks.
I use the variable "checkedInputCheckboxCount" to store this
information but it seems that I get results multiplied by 2.
What did I do wrong? Any hint ?
Thanks a lot!
Alessandro
Here is my page:
<html>
<script type="text/javascript" src="/home/gbs00819/src/html/script/
jquery/jquery-1.2.1.pack.js"></script>
<style type="text/css">
.category{border: 1px solid grey;}
.container{border-spacing: 4px; width: 60%}
</style>
<script type="text/javascript">
$(document).ready(function() {
// start JSP generated content
var arr = new Array("foo", "bar", "misc");
var customView = new Array();
customView["CAT1"] = new Array("foo", "bar", "misc");
customView["CAT2"] = new Array("bar");
customView["CAT3"] = new Array();
// end JSP generated content
function clearBox(){
for(var i = 0; i < arr.length; i++){
$("."+arr[i]).hide();
}
}
function showBox(boxName){
clearBox();
var itemsToShow = customView[boxName];
for(var i = 0; i < itemsToShow.length; i++)
$("."+itemsToShow[i]).show();
}
function resetScreen(){
$(":checkbox").each(function() {
$(this).attr("checked", false);
});
clearBox();
}
resetScreen();
var prevCategory = "";
$(":checkbox").click(function() {
var selectedCategory = $(this).parents("table").attr("id");
// go up to find the table that include the clicked checkbox and then
count the number of checkboxes inside that table
var checkedInputCheckboxCount = $
(this).parents("table").find("input[@type=checkbox]
[@checked]").size();
console.log("checked input checkbox count: " +
checkedInputCheckboxCount);
if(checkedInputCheckboxCount == 0)
clearBox(); // if none checkboxes is checked, don't display the
"content section"
else
showBox(selectedCategory);
// if current category differs from previous category decheck all
checkboxes of the previous category
if(prevCategory != selectedCategory){
prevCategory = selectedCategory;
$(this).parents("#first").find("table[@id!
='"+selectedCategory+"']").each(function(){
$(this).find(":checkbox").each(function(){$
(this).attr("checked", false); });
});
}
});
});
</script>
<body>
<table id="first" class="container">
<tr>
<td>
<table width="100%" class="category" id="CAT1">
<tr>
<th>category 1</th>
</tr>
<tr>
<td>item 1</td>
<td><input type="checkbox" name="CAT1" value="1"></td>
</tr>
<tr>
<td>item 2</td>
<td><input type="checkbox" name="CAT1" value="2"></td>
</tr>
<tr>
<td>item 3</td>
<td><input type="checkbox" name="CAT1" value="3"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" class="category" id="CAT2">
<tr>
<th>category 2</th>
</tr>
<tr>
<td>item 5</td>
<td><input type="checkbox" name="CAT2" value="5"></td>
</tr>
<tr>
<td>item 6</td>
<td><input type="checkbox" name="CAT2" value="6"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" class="category" id="CAT3">
<tr>
<th>category 3</th>
</tr>
<tr>
<td>item 7</td>
<td><input type="checkbox" name="CAT3" value="7"></td>
</tr>
</table>
</td>
</tr>
</table>
<p class="foo">sect 1 - some content ...
<p class="bar">sect 2 - some content ...
<p class="misc">sect 3 - some content ...
</body>
</html>