简单的jQuery脚本在Chrome中运行良好，在Firefox中失败

Question

我有这个代码：

    <!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>

谢谢

Answer 1

怎么样这个使用

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

Answer 2

试试这个代码。 我基本上重写了您的所有逻辑：

<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/

Answer 3

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中将“ input”更改为“ .markbox”

简单的jQuery脚本在Chrome中运行良好，在Firefox中失败

问题描述

3 个解决方案

解决方案1
1 2011-12-06 06:17:27

解决方案2
1 2011-12-06 06:19:36

解决方案3
1 已采纳 2011-12-06 06:21:23

简单的jQuery脚本在Chrome中运行良好，在Firefox中失败

问题描述

3 个解决方案

解决方案1 1 2011-12-06 06:17:27

解决方案2 1 2011-12-06 06:19:36

解决方案3 1 已采纳 2011-12-06 06:21:23

解决方案1
1 2011-12-06 06:17:27

解决方案2
1 2011-12-06 06:19:36

解决方案3
1 已采纳 2011-12-06 06:21:23