Joh*_*ach 3 checkbox jquery count
我正在尝试编写一个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.
要选中选中的复选框,您需要:checkedpsuedo-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>