Question

我有一个建筑物的成本列表（建筑物是使用PHP从db生成的）：

Building
[ ] Susilo 2A-13
[ ] Susilo 2A-12

我希望它看起来像这样

Building
[ ] Susilo 2A-13 (0%)
[ ] Susilo 2A-12 (0%)

当没有选择任何内容时，就像这样：

Building
[x] Susilo 2A-13 (100%)
[ ] Susilo 2A-12 (0%)

选择时，

以及50％50％。此外，当3栋建筑显示它应显示33％33％33％。我该怎么做？

Btw html很简单：

Building<br />
<input type="checkbox" name="6" value="6"> Susilo 2A-13<br />
<input type="checkbox" name="7" value="7"> Susilo 2A-12<br />

问题是这些复选框是动态生成的，并不是一个常数。

Answer 1

假设您没有大量复选框，最简单的方法是在Javascript中执行此操作。你用JQuery标记了这篇文章，但没有在你的帖子中提到它，所以我假设你正在使用它。你可以尝试这样的事情：

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
    var checked = $(':checked');
    var percentage = Math.round((1 / checked.length) * 100);
    checked.siblings('.percentage').html(percentage);
    $('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<div>
    <input type='checkbox' onclick='markPercentages()'/>Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
    <input type='checkbox' onclick='markPercentages()' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
    <input type='checkbox' onclick='markPercentages()' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
</body>
</html>

您需要对html进行一些调整，以便在跨度中包含每个单独的百分比以及div中的复选框+文本，但计算它的概念应该仍然相同。

拉出复选框的数量
取该数字的倒数
乘以100获得百分比
将该号码反馈给所有已检查项目的表单
将其他所有内容设为0

100％百分比使用javascript分隔复选框的数量

1 个答案: