處理具有不同ID和功能的多個複選框

Question

將所有checkboxes放在單個事件中的最佳方式是什麼？

示例如下代碼，我有20個（從#tcbx1 - #tcbx20）。

function tblcheckboxes(){ 
    var a=0; 
    if ($('#tcbx1').is(":checked")) { 
     a = parseFloat($("#tcbx1").val(), 10); 
    } 

$(document).ready(function(){ 
     $('#tcbx1').click(function(){ 
      tblcheckboxes(); 
      grandtotal(); 
     }); 
}); 

而且具有不同id和其他複選框不同$(document).ready(function(){（從#cbx3 - #cbx5）

function grandtotal(){ 
    var g=0; 
    if ($('#cbx3').is(":checked")) { 
     g = parseFloat($("#cbx3").val(), 10); 
     } 

$(document).ready(function(){ 
    $('#cbx3').click(function(){ 
     grandtotal(); 
}); 

第一checkbox在一個表中進行分組和其他checkbox只是一些附加組件。

Answer 1

查看starts-with selector[id^="tcbx"]以選擇標識符以「tcbx」開頭的所有元素。

function tblcheckboxes(cb){ 
    var a=0; 
    if (cb.is(":checked")) { 
     a = parseFloat(cb.val(), 10); 
    } 
} 

$(document).ready(function(){ 
    $('[id^="tcbx"]').click(function(){ 
     var cb = $(this); 
     tblcheckboxes(cb); 
     grandtotal(cb); 
    }); 
}); 

...並選擇開始 「CBX」 項目：

function grandtotal(cb){ 
    var g=0; 
    if (cb.is(":checked")) { 
     g = parseFloat(cb.val(), 10); 
    } 
} 

$(document).ready(function(){ 
    $('[id^=cbx]').click(function(){ 
     var cb = $(this); 
     grandtotal(cb); 
});