Javascript高级复选框

Question

我有一个表单，这是一个用php构建的表，从数据库中提取一堆信息。在这些中，我有一个复选框，当点击时，提取estimatedCost的值，并将其扔到一个JavaScript函数中，该函数计算它并保持所有选中对象的运行总数。

我要做的是创建一个检查所有和取消检查所有选项，仍然将需要的变量传递到其他javascript函数。让我用一些代码来演示:

这将在标题旁边绘制复选框。

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

这是当前的选中和取消选中所有链接:

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

现在我在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;
    }

另一个，每次处理一个点击:

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

那么问题是:如何让check all选中所有框，并将信息传递给calcTotals函数，以便正确添加值?

Answer 1

这是一个jsfiddle，做什么(我认为)你正在寻找:http://jsfiddle.net/kz9gU/1/

我使用自定义的data-*属性来存储估计的成本(符合HTML5的规范)，所以它在复选框的标签中定义。每个复选框在选中/未选中时调用updateTotal()函数，但不传递任何参数。然后，updateTotal()循环遍历复选框，从data-cost属性中读取每个金额，并显示总和。

check/uncheck函数不需要计算任何值;他们只是检查/取消检查所有内容，然后调用updateTotal()。

编辑:嘿，刚刚意识到你没有用jQuery。我开始认为jQuery是理所当然的，尽管我自己实际上并不使用jQuery。你在小提琴中看到的可能是我写过的最长的基于jquery的JS代码:)
无论如何，使用某种库来消除浏览器之间的差异几乎总是一个好主意，而jQuery现在是这堆库中的王者。

但是不管是不是库，代码应该给你一个如何继续的想法

Answer 2

我希望我理解你的意思，你想要一个选中/取消选中所有的功能?http://jetlogs.org/jquery/jquery_select_all.html之后，使用php获取复选框数组并传递信息，在php中执行循环以检查数组的值并执行语句。