我正在尝试编写一个 jQuery 脚本（我以前从未编写过，我需要帮助）。详情如下；我有一个带有复选框的表格。每个复选框都有不同的 id 和名称，出于我自己的编程原因，我将需要它们。我只想计算复选框的数量，然后简单地将其显示在固定 div 的右侧。 div 只能在第一个复选框被勾选后显示。我怎样才能做到这一点？我的示例复选框是：
<input type="checkbox" name="check_box_no_2" id="check_box_no_2" value="some_important_value">
复选框名称是递增的。这意味着下一个将是 check_box_no_3。请帮忙...
到目前为止，我一直在摆弄
$("input[type=checkbox][checked]").each(
function() {
// Insert code here
}
);
但这似乎不适用于 FireFox。
【问题讨论】：
要选中选中的复选框，您需要:checked psuedo-class。您还需要观察每个复选框，并在其设置更改时更新计数并显示或隐藏 div。这是一种方法：
$(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);
};
});
#count 是显示计数的元素（可能是段落标签），#status 是您要显示/隐藏的 div。
完整的 HTML 示例，供参考：
<!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>
【讨论】：
updateCount()吗？这将导致在页面加载之前执行更新代码 - OP 只希望在单击第一个复选框时发生更新
试试这个：
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");
}
【讨论】：