Count the number of checked check-boxes and display them on a fixed div using jQuery
Question
I'm trying to write a jQuery script (I have never written one before and I need help). The details are as following; I have a form with check-boxes. Each check-box has a different id and name which I will need for my own programming reasons. What I simply want is to count the number of check-boxes and simply display it on the right side in a fixed div. The div must only be shown after the first checkbox is ticked. How can I do this? My example check-box is :
<input type="checkbox" name="check_box_no_2" id="check_box_no_2" value="some_important_value">
The check-box name is incremental. Meaning the next one will be check_box_no_3. Please help...
So far I have been fiddling with
$("input[type=checkbox][checked]").each(
function() {
// Insert code here
}
);
but this seems not to be working with FireFox.
2 answers
solution1
9 ACCPTED 2010-08-19 07:56:07
To select checked checkboxes, you need the :checked psuedo-class. You also need to observe each checkbox, and when its setting changes, update the count and show or hide the div. Here's one way to do that:
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
Where #count is the element that will show the count (perhaps a paragraph tag), and #status is the div you want to show/hide.
Full HTML example, for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
</script>
</head>
<body>
<ul>
<li><input type="checkbox"> One</li>
<li><input type="checkbox"> Two</li>
<li><input type="checkbox"> Three</li>
</ul>
<div id="status">
<p id="count">0</p>
</div>
</body>
</html>
solution2
0 2010-08-19 08:11:43
Try this:
var totalChecked = 0;
$("input[type=checkbox]:checked").each(function(){
totalChecked++;
});
if(totalChecked > 0){
$("div.display").css("display,block");
$("div.display").text(totalChecked);
}else{
$("div.display").css("display,none");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.