使用Java的高级复选框

Question

I have a form that is a table built with php to pull a bunch of information from the database. In these, i have a checkbox that, when clicked, pulls the value of the estimatedCost and throws it into a JavaScript function that calculates it and keeps a running total of all the objects checked.

What i'm trying to do is create a check all and uncheck all option that will still pass the needed variables into the other javascript functions. Let me demonstrate with some code:

This draws the checkbox next to the title.

foreach($replace as $key => $value)
  {
    $jScript = 'onclick=\'calcTotals("'.$replace[$key]['estimatedCost'].'","'.$replace[$key]['optionItem_id_replaceOrRepair'].'","'.$replace[$key]['service_title'].'","'.$replace[$key]['maintenanceitem_id'].'");\'';
    $checkbox = sprintf('<input type="checkBox" name="ids[]" id="%s" value="%s" %s>', $replace[$key]['maintenanceitem_id'], $replace[$key]['maintenanceitem_id'], $jScript).'&nbsp;';
    $replace[$key]['title'] = $checkbox.$replace[$key]['title'];
    $replace[$key]['estimatedCost'] =  $replace[$key]['estimatedCost'];
  } 

This is the current check all and uncheck all links:

echo '<a href="#" onClick=\'setCheckboxes("budgeting", true); return false;\'>Check All</a>&nbsp;|&nbsp;';
  echo '<a href="#" onClick=\'setCheckboxes("budgeting", false); return false;\'>Uncheck All</a>';

Now the current functions i have in javascript:

function setBudgetCheckboxes(the_form, do_check) {
        var elts      = (typeof(document.forms[the_form].elements['ids[]']) != 'undefined')
                      ? document.forms[the_form].elements['ids[]']
                      : (typeof(document.forms[the_form].elements['ids[]']) != 'undefined')
              ? document.forms[the_form].elements['ids[]']
              : document.forms[the_form].elements['ids[]'];
        var elts_cnt  = (typeof(elts.length) != 'undefined')
                      ? elts.length
                      : 0;
        if (elts_cnt) {
            for (var i = 0; i < elts_cnt; i++) {
                elts[i].checked = do_check;
                var name = document.getElementById(name);
            } // end for
        } else {
            elts.checked = do_check;
        } // end if... else
        return true;
    }

And the other, which handles the clicks one at a time:

function calcTotals(amount, type, service, name) {
        if(amount[0] == '$') {
            amount = amount.substr(1,amount.length);
        }
        var id = type+"_"+service+"_selected";
        var grand_id = "Grand_selected";
        var grand_service_id = "Grand_"+service+"_selected";
        var type_id = type+"_selected";

        var checked = document.getElementById(name).checked;

        var multiplier = -1;

        if(checked) {
            multiplier = 1;
        }

        amount = amount * multiplier;

        addBudgetValue(amount, id);
        addBudgetValue(amount, grand_id);
        addBudgetValue(amount, grand_id+"_h");
        addBudgetValue(amount, type_id);
        addBudgetValue(amount, grand_service_id);
        addBudgetValue(amount, grand_service_id+"_h");
    }
function addBudgetValue(amount, id) {
        var current_value = document.getElementById(id).innerHTML;
        var curtmp = 0;
        if(current_value == "$0") {
            current_value = amount;
        }
        else {
            curtmp = parseFloat(current_value.substr(1,current_value.length));
            current_value = (curtmp+parseFloat(amount));
        }   
        var newVal = "$"+Number(current_value).toFixed(2);
        if(newVal == "$0.00")
            newVal = "$0";  
        document.getElementById(id).innerHTML = newVal;
    }

So the question is this: How do you get the check all to check all the boxes, and pass the information into the calcTotals function so that the values are added correctly?

Answer 1

Here's a jsfiddle that does what (I think) you're looking for: http://jsfiddle.net/kz9gU/1/

I'm using a custom data-* attribute to store the estimated cost (spec compliant as per HTML5), so it's defined in the checkboxes' tags. Each checkbox then calls an updateTotal() function when checked/unchecked, but doesn't pass any arguments. updateTotal() then loops through the checkboxes, reading each amount from the data-cost attribute, and displays the sum.

The check/uncheck functions then don't need to calculate any values; they just check/uncheck everything and call updateTotal() afterwards.

Edit: Heh, just realized you're not using jQuery. I'm just starting to take jQuery for granted, even though I actually don't use jQuery myself. What you see in the fiddle is probably the longest piece of jQuery-based JS, I've actually written :)
At any rate, it's almost always a good idea to use some sort of library to smooth out browser differences, and jQuery is king of the heap right now.

But library or not, the code should give you an idea of how you could proceed.

Answer 2

I hope I understood you currectly, you want a check/uncheck all feature? http://jetlogs.org/jquery/jquery_select_all.html after that get the checkbox array with php and pass the information, in PHP do a loop to check the values of the array and execute your statements.