如何用JavaScript获取GridView中嵌套在SPAN内的CheckBox控件

原问题场景 #

需要计算GridView中已勾选行的数量总和，但JavaScript无法获取嵌套在SPAN内的CheckBox控件，现有脚本无执行效果。

原页面HTML代码 #

<table cellspacing="0" cellpadding="1" rules="all" border="1" id="grdView" style="background-color:#F2F4FF;width:100%;border-collapse:collapse;">
     <tr>
        <td align="center">
                        <span class="chkSelected" style="display:inline-block;border-style:None;"><input id="grdView_ctl02_chkSelect" type="checkbox" name="grdView$ctl02$chkSelect" /></span>
                        <input type="hidden" name="grdView$ctl02$hdDocId" id="grdView_ctl02_hdDocId" value="DO0002" />
                        <input type="hidden" name="grdView$ctl02$hdScope" id="grdView_ctl02_hdScope" value="Dlv" />
                        <input type="hidden" name="grdView$ctl02$hdDocType" id="grdView_ctl02_hdDocType" value="DO" />
                        <input type="hidden" name="grdView$ctl02$hdRefNo" id="grdView_ctl02_hdRefNo" />
                        <input type="hidden" name="grdView$ctl02$hdServiceType" id="grdView_ctl02_hdServiceType" />
                        <input type="hidden" name="grdView$ctl02$hdQty" id="grdView_ctl02_hdQty" />
                        <input type="hidden" name="grdView$ctl02$hdWeight" id="grdView_ctl02_hdWeight" />
                    </td>
    </tr>
</table>

原无效果的JavaScript代码 #

function calculateTotal()
{        
    var sum = 0.00; 
    var itemsum = 0.00;        
    var gv = document.getElementById('grdView'); 

    for (var row = 1; row < gv.rows.length; row++) {          
        var cb = gv.rows[row].cell[0].childNodes[0].find('input[type="checkbox"]');
        if (cb.checked) {
            var quantity = gv.rows[row].cells[8].innerText;
            try {
                sum += new Number(quantity);
            } catch (err) {
                alert(quantity);
            }
        }
    } 
    alert(sum.toString()); 
    return false;
   
}    

原代码的问题点 #

1. 拼写错误：gv.rows[row].cell[0] 应为 gv.rows[row].cells[0]（单元格集合是复数cells）
2. 方法误用：原生DOM元素没有find()方法（这是jQuery方法），且childNodes[0]可能获取到空白文本节点，无法定位目标元素
3. 行索引错误：示例中只有一行数据，循环从row=1开始会直接跳过执行
4. 数量获取错误：示例行中没有第8个单元格，且数量存储在隐藏域hdQty中，不应从单元格文本获取

修正后的解决方案 #

方案一：使用原生DOM选择器（简洁高效） #

function calculateTotal() {
    var sum = 0.00;
    var gv = document.getElementById('grdView');
    
    // 遍历所有行，若有表头则从row=1开始，无表头则从row=0开始
    for (var row = 0; row < gv.rows.length; row++) {
        var currentRow = gv.rows[row];
        // 精准定位SPAN内的CheckBox
        var cb = currentRow.querySelector('span.chkSelected input[type="checkbox"]');
        if (cb && cb.checked) {
            // 获取当前行的数量隐藏域值
            var qtyInput = currentRow.querySelector('input[id*="hdQty"]');
            if (qtyInput && qtyInput.value) {
                var quantity = parseFloat(qtyInput.value);
                if (!isNaN(quantity)) {
                    sum += quantity;
                }
            }
        }
    }
    alert(sum.toFixed(2));
    return false;
}

方案二：遍历元素（兼容旧浏览器） #

function calculateTotal() {
    var sum = 0.00;
    var gv = document.getElementById('grdView');
    
    for (var row = 0; row < gv.rows.length; row++) {
        var currentRow = gv.rows[row];
        var firstCell = currentRow.cells[0];
        var cb = null;
        var qtyVal = 0;
        
        // 遍历第一个单元格内的所有子元素
        for (var i = 0; i < firstCell.children.length; i++) {
            var elem = firstCell.children[i];
            // 找到目标SPAN并获取内部的CheckBox
            if (elem.className === 'chkSelected') {
                for (var j = 0; j < elem.children.length; j++) {
                    var input = elem.children[j];
                    if (input.type === 'checkbox') {
                        cb = input;
                        break;
                    }
                }
            }
            // 找到数量隐藏域
            if (elem.id && elem.id.includes('hdQty')) {
                qtyVal = parseFloat(elem.value) || 0;
            }
        }
        
        if (cb && cb.checked) {
            sum += qtyVal;
        }
    }
    alert(sum.toFixed(2));
    return false;
}

关键说明 #

• querySelector()支持CSS选择器语法，能快速定位嵌套元素，是现代浏览器的首选方式
• 行索引需根据GridView是否有表头调整：有表头则从row=1开始，无表头则从row=0开始
• 从隐藏域hdQty获取数量值更可靠，避免页面显示文本的格式问题
• 使用parseFloat()转换数值并判断isNaN()，防止非数字值导致计算错误

内容的提问来源于stack exchange，提问作者user3607582