Home/ Questions/Q 6901023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:37:17+00:00

I have this code: <!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>

  • 0

I have this code:

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

It shows a percentage right next to the building (Susilos) of the cost that it’s adding. In simplest terms, if one is checked it shows 100%, if two are checked it shows 50% on the first and 50% on the second and so on.

It works fine in Chrome but in Firefox when I check just one, it shows 50% on that, like there are checked two. When I check two it shows 33% on those, like I checked three of them. Why this happen and how I should fix this?

Anyway , deleting a part of the code that’s beyond that code makes that works also:

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

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/sjRAu/ – working all browsers

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

});

    If you have more inputs on the page just give your checkboxes a class like ‘markbox’ and change ‘input’ to ‘.markbox’ in your JS

    • 0