簡單的jQuery腳本在Chrome中工作正常，並在Firefox

失敗，我有這樣的代碼：簡單的jQuery腳本在Chrome中工作正常，並在Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>The management panel</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<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> 
    <form> 
    Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br /> 
    <div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div> 


    <br />Category<br /><select name="title"><option value="Wages">Wages</option><option value="Listrik">Listrik</option><option value="Iuran Bulanan">Iuran Bulanan</option></select><br /> 
     On<br /><input type=text name=date id=date /><br /> 

    Notes<br /><input type=text name=note /><br /> 
    Value<br /><input type=text name=cost onChange="addDecimalPoints(this.id)" id=cost /><br /> 
    <input type=submit value="Save" /> 
    </form> 

</body> 
</html>

這表明旁邊，它的增加的成本建設（Susilos）的百分比。最簡單的說，如果選中一個，則顯示100％，如果選中兩個，則顯示第一個顯示50％，第二個顯示50％，等等。

它在Chrome中正常工作，但在Firefox中，當我檢查一個時，它顯示50％，就像檢查了兩個一樣。當我檢查兩個時，它顯示了33％，就像我檢查了其中三個。爲什麼會發生這種情況，我該如何解決這個問題

無論如何，刪除已經超出了該代碼使得該作品也代碼的一部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>The management panel</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<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> 
    <form> 
    Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br /> 
    <div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div> 

    </form> 

</body> 
</html>

感謝

來源

2011-12-06 Octavian

中將'input'改爲'.markbox'我似乎無法複製...什麼版本您使用的是Firefox嗎？ –

是的，它在FireFox 8.1中工作 –

添加了確切的代碼，因爲不可能複製錯誤。 – Octavian

http://jsfiddle.net/sjRAu/ - 工作的所有瀏覽器

HTML：

<div> 
    <input type='checkbox' />Susilo 2A-13 (<span class='percentage'>0</span>%) 
</div> 
<div> 
    <input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%) 
</div> 
<div> 
    <input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%) 
</div>

JS：

$(document).ready(function() { 
$('input').click(function(){ 
    markPercentages(); 
}); 

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'); 
} 

});

如果你在頁面上有更多的輸入，只需給你的複選框添加一個類似'markbox'的類，並在你的JS

來源

2011-12-06 06:21:23 themerlinproject

謝謝，像一個魅力工作。另外感謝jsfiddle的提示，非常有用的工具。 – Octavian

怎麼樣利用這樣一個

$(function(){ 
    $('input[type=checkbox').click(function(){ 
      var checked = $('input[type=checkbox]').attr('checked'); 
      var percentage = Math.round((1/checked.length) * 100); 
      checked.siblings('.percentage').html(percentage); 
      $('input[type=checkbox]').not(checked).siblings('.percentage').html('0');   
    }); 
});

來源

2011-12-06 06:17:27

試試這個代碼。我基本上重寫所有的邏輯：

<html> 
<head> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(':checkbox').change(function() { 
     var num_checked = $(':checkbox:checked').length; 

     if (num_checked == 0) { 
      $(':checkbox').each(function() { 
       $(this).siblings('.percentage:eq(0)').text('0'); 
      }); 

      return; 
     } 

     var percentage = Math.round(100/num_checked); 

     $(':checkbox').each(function() { 
      if ($(this).is(':checked')) { 
       $(this).siblings('.percentage:eq(0)').text(percentage); 
      } else { 
       $(this).siblings('.percentage:eq(0)').text('0'); 
      } 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
<div> 
    <input type='checkbox'/>Susilo 2A-13 (<span class='percentage'>0</span>%) 
</div> 
<div> 
    <input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%) 
</div> 
<div> 
    <input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%) 
</div> 
</body> 
</html>

演示：http://jsfiddle.net/NKuHS/3/

來源

2011-12-06 06:19:36 Blender

簡單的jQuery腳本在Chrome中工作正常，並在Firefox

回答

相關問題