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

所以问题是：如何检查所有框以检查所有框，并将信息传递给calcTotals函数以便正确添加值？

Answer 1

这是一个jsfiddle，可以做你想要的（我认为）：http://jsfiddle.net/kz9gU/1/

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

检查/取消检查功能则不需要计算任何值;他们只需检查/取消选中所有内容，然后再拨打updateTotal()。

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

但是不管库，代码应该让你知道如何继续。

Answer 2

我希望我能理解你，你想检查/取消选中所有功能吗？ http://jetlogs.org/jquery/jquery_select_all.html之后用php获取checkbox数组并传递信息，在PHP中做一个循环来检查数组的值并执行你的语句。

使用Javascript的高级复选框

2 个答案: