2011-12-02 39 views
0

我有一個建築成本清單在檢查箱子的數量分裂比例(建築都從一個數據庫和PHP動態生成)這樣100%使用JavaScript

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%。我應該怎麼做?

順便說一下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 /> 

的問題是,這些複選框是在飛行中產生的,它不是一個常數。

+0

添加了html。我在選中的複選框數量上教100分,然後在複選框後的每個innerhtml上顯示結果。 – Octavian

回答

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
+0

在Chrome瀏覽器中很有魅力,但它並不像Firefox中所顯示的那樣工作(它只顯示一個選中選項的50%,它應該顯示100%,同時選中2個選項也顯示33%)。 – Octavian

+0

有趣。我在FF中也嘗試過它,它工作得很好。你運行的是舊版本的FF嗎?我正在運行8.0。 – sgcharlie