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

これは、現在はすべてをチェックして、すべてのリンクのチェックを外している：私はJavaScriptで持って

今

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

現在の機能：

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

そして、他の、ハンドル一度に1つずつクリック：

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/

私は推定コスト（HTML5あたりとして準拠した仕様）を格納するためのカスタムdata-*属性を使用していますので、それはで定義されていますチェックボックスのタグ。チェックボックスをオンまたはオフにすると、各チェックボックスはupdateTotal()関数を呼び出しますが、引数は一切渡しません。 updateTotal()は、チェックボックスをループし、data-cost属性から各金額を読み取り、合計を表示します。

チェック/チェック解除機能は、値を計算する必要はありません。彼らはすべてをチェック/チェックを外し、updateTotal()に電話してください。

編集：Heh、ちょうどあなたがjQueryを使用していないことを認識しました。 jQueryを自分で使用していなくても、jQueryを当然受け入れ始めています。あなたがフィドルで見るものは、おそらくjQueryベースのJSの中で最も長い部分です。私は実際に書いています:)
ブラウザの相違を滑らかにするために、とにかく何らかの種類のライブラリを使用することをお勧めします.jQuery今、ヒープの王様です。

しかし、ライブラリかどうかにかかわらず、コードはどのように進むことができるかのアイデアを与える必要があります。

Answer 2

私はあなたを理解してくれることを願っています。チェックをしたい、すべての機能をオフにしますか？ http://jetlogs.org/jquery/jquery_select_all.htmlその後、PHPでチェックボックス配列を取得し、情報を渡します。PHPでは、配列の値をチェックしてステートメントを実行するループを実行します。