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

所以問題是這樣的：你如何獲得全部檢查以檢查所有框，並將信息傳遞到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並傳遞信息，在PHP中做一個循環來檢查數組的值並執行您的語句。